/* La vitrine partage la palette de l'app, mais rien de son code : elle doit s'ouvrir en
   moins d'une seconde en 3G, alors que l'app pèse 574 Ko de JavaScript et n'affiche rien
   sans lui. Ce fichier fait quelques kilo-octets, il est mis en cache une semaine, et les
   pages qu'il habille sont du HTML lisible tel quel — par un lecteur comme par Google. */
:root {
  --h-barre: 66px;              /* header .wrap */
  --h-tete: calc(var(--h-barre) + 1px);  /* + la bordure basse de <header> */
  --vert: #7A8F77;
  --vert-fonce: #2E3B2E;
  --vert-moyen: #3A4A39;
  --orange: #C65D2A;
  --sable: #F7F4EC;
  --tendre: #eef1ec;
  --bord: #e8e2d4;
  --gris: #6b756b;
  --gris-clair: #918e6a;
  --encre: #263025;
  --ombre-douce: 0 1px 2px rgba(46, 59, 46, .05), 0 8px 24px rgba(46, 59, 46, .07);
  --ombre-levee: 0 2px 4px rgba(46, 59, 46, .06), 0 16px 36px rgba(46, 59, 46, .13);
  --rayon: 16px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 56px; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #fff;
  color: var(--encre);
  line-height: 1.5;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height:auto est indispensable, pas décoratif. Nos <img> portent des attributs width et
   height — il le faut, sinon la page saute pendant le chargement. Mais quand le CSS impose
   la largeur sans libérer la hauteur, le navigateur garde la hauteur de l'attribut et
   ignore l'aspect-ratio : la photo du héros faisait 331 × 520 sur téléphone au lieu de
   331 × 207. Elle était étirée sur deux tiers de l'écran. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--orange); }
::selection { background: #dfe6dc; }
:focus-visible { outline: 2.5px solid var(--vert); outline-offset: 2px; border-radius: 4px; }

/* Le contenu est borné, et c'est voulu : au-delà d'environ 90 caractères par ligne, l'œil
   perd le début de la ligne suivante. 1200 px laisse trois blocs de services à 375 px —
   assez large pour respirer — pendant que les textes longs restent à 760. */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }

/* LA MESURE — la longueur de ligne du texte suivi.
 *
 * Un conteneur large ne fait pas une colonne lisible. Au-delà d'environ 75 caractères, l'œil
 * ne retrouve plus le début de la ligne suivante et relit deux fois la même. Relevé sur
 * écran de 1280 px avant correction : 110 caractères sur les pages légales, 101 sur la page
 * d'accueil, 99 sur les annonces d'emploi, 113 sur une aide de champ.
 *
 * Le système posait déjà des mesures en `ch` sur les chapôs (52ch) et les sous-titres (62ch).
 * Celles-ci prolongent la même règle au texte qu'on lit en entier. Les titres, les tableaux
 * et les cartes gardent la pleine largeur : on ne les lit pas ligne à ligne.
 *
 * Sous 1000 px la mesure ne sert plus — la colonne est déjà plus étroite que le plafond. */
.faq .rep,
.coches li,
.intro-poste { max-width: 68ch; }
/* Ces trois-là tiennent dans une grille : à 1280 px la colonne les borne déjà, mais sous
   1000 px la grille passe à une colonne et le paragraphe reprend toute la largeur. */
.voie p,
.porte p,
.atout p { max-width: 68ch; }
.bloc-note,
.champ .aide,
.bloc-app p { max-width: 76ch; }
/* Centrée : sans marges automatiques, la mesure la colle à gauche. */
.stores-note { max-width: 72ch; margin-left: auto; margin-right: auto; }

/* L'ÉCHELLE DES TITRES, telle qu'elle est réellement utilisée :
 *
 *   h3      16.5 (dense) · 17.5 (courant) · 19 (titre de bloc en grille)
 *   h2      18.5 (bloc de compte) · 20 (tiroir, réinitialisation) · 22 (document, colonne)
 *   h1      fluide, par clamp()
 *
 * Cinq valeurs isolées ont été ramenées sur ces marches : `.atout h3`, `.famille-nom` et
 * `.indispo-titre` étaient à 17 quand tout le reste est à 17,5 ; `.voie h3` à 19,5 à côté de
 * `.mission-bloc h3` à 19 ; `.appli-bloc h2` à 21 alors qu'aucun autre titre n'y est. Un demi
 * pixel ne se voit pas, mais rien n'était jamais tout à fait aligné.
 *
 * Les tailles fluides restent fluides : un clamp() produit toutes les valeurs entre ses deux
 * bornes, et ce n'est pas une dérive. */

/* Les titres. Les tailles suivent la largeur de l'écran au lieu de sauter à un point de
   rupture, et c'est le navigateur qui choisit où couper les lignes — un <br> écrit à la
   main coupe au même endroit sur un téléphone et sur un écran de bureau, ce qui donne
   « Une plateforme de confiance, / ça se construit à plusieurs » là où la phrase tenait. */
/* Deux réglages, et il ne faut pas les confondre — je les avais confondus.

   « balance » égalise la longueur des lignes. Pour y arriver, il RACCOURCIT les lignes
   longues : sur une description de catégorie il laissait 157 px de vide au bout d'une ligne
   de 526. Le lecteur ne voit pas une belle symétrie, il voit une phrase coupée alors qu'il
   restait de la place. C'est bon pour un grand titre de deux lignes, où l'équilibre se lit
   comme un choix ; c'est mauvais partout ailleurs.

   « pretty » ne raccourcit rien. Il empêche seulement qu'un mot se retrouve seul sur la
   dernière ligne. C'est ce qu'il faut pour du texte courant.

   Mesuré sur un titre de 716 px de large : avec « balance », deux lignes de 455 et 476 px —
   240 px de vide au bout. Sans lui, 661 et 270 : la première ligne se remplit. Même nombre
   de lignes dans les deux cas, donc « balance » n'apportait rien qu'on ait demandé. */
h1, h2, h3, h4 { letter-spacing: -.022em; line-height: 1.16; font-weight: 800; }
h1, h2, h3, h4, p, li { text-wrap: pretty; }
/* Ce qui ne doit jamais se couper en deux : un nom de magasin, un intitulé de bouton. */
.store span, .btn { white-space: nowrap; }
/* Sauf ceux-là : un bouton qui ne peut pas replier son texte ne peut pas non plus rétrécir,
   et sur un écran de 320 px « Je propose mes services » sortait de la page. */
.btn.famille-btn, .btn.burger-compte, .voie .btn, .actions-ligne .btn { white-space: normal; }
h1 { font-size: clamp(30px, 4.4vw, 46px); }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.2; }
h3 { font-size: 17.5px; line-height: 1.35; letter-spacing: -.012em; font-weight: 700; }

/* Les pictogrammes, dessinés au trait plutôt qu'empruntés au clavier d'émojis : ils prennent
   la couleur du texte qui les porte et se dessinent pareil sur tous les téléphones. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* En-tête */
header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid rgba(232, 226, 212, .9);
}
/* La hauteur de la barre du haut. Nommee, parce que le calcul qui pousse le pied de page
   sous la ligne de flottaison en depend : si l'une change sans l'autre, le pied reapparait
   ou un vide se creuse. --h-tete vaut cette hauteur PLUS le pixel de bordure basse. */
header .wrap { display: flex; align-items: center; justify-content: space-between; height: var(--h-barre); gap: 12px; }
/* Le vrai logo : un S qui fait maison, porté par une main. Il existait, je l'avais
   remplacé par deux bouts de texte. */
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; color: var(--vert-fonce); text-decoration: none; letter-spacing: -.3px; }
.logo img { width: 34px; height: 34px; border-radius: 9px; }
/* « header nav » et non « nav » : le sommaire des pages longues et le fil d'Ariane sont
   aussi des <nav>, et un display:flex non qualifié les mettait tous les deux en ligne. */
header nav { display: flex; align-items: center; gap: 19px; }
header nav a { color: var(--gris); text-decoration: none; font-size: 14.5px; font-weight: 600; transition: color .12s ease; }
header nav a:hover { color: var(--vert-fonce); }

/* Le sélecteur de langue. Il porte le nom de l'AUTRE langue, dans cette langue : « English »
   quand on lit du français. Un drapeau aurait été plus joli et plus faux — le Cameroun est
   bilingue, aucun drapeau ne dit « anglais » ici sans dire autre chose. */
.langue {
  border: 1.5px solid var(--bord); border-radius: 999px; padding: 6px 14px;
  font-size: 13.5px; font-weight: 700; color: var(--vert-fonce); white-space: nowrap;
}
.langue:hover { border-color: var(--vert); background: var(--tendre); }
.langue-court { display: none; }

/* L'application, depuis l'en-tête. Sur ordinateur elle est proposée par la bande dédiée et
   par les pages métier ; ici elle prendrait la place d'un lien de navigation. */
.btn-app { display: none; align-items: center; gap: 7px; padding: 7px 13px 7px 11px; border-radius: 999px;
  background: var(--vert-fonce); color: #fff; text-decoration: none; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.btn-app:hover { background: #26301f; }
.btn-app .ico { width: 17px; height: 17px; }
/* Quarante-quatre pixels. C'est la taille d'un bout de doigt, et c'est le seuil qu'Apple
   contrôle. Le logo, la langue et le bouton de l'application faisaient trente à trente-six
   pixels de haut, serrés côte à côte dans une barre de trois centimètres : on visait la
   langue et on ouvrait l'application. La hauteur minimale s'obtient sans grossir le dessin —
   les boutons gardent leur bordure, c'est la zone sensible qui s'étend. */
@media (max-width: 900px) {
  .btn-app { display: inline-flex; }
  .langue-long { display: none; }
  .langue-court { display: inline; }
  .langue, .btn-app { padding: 7px 12px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  .logo { min-height: 44px; }
}
/* Sous 355 px seulement, le pictogramme reste seul : au-dessus il y a la place pour le mot,
   et un rond sombre isolé ne dit pas ce qu'il fait. */
@media (max-width: 355px) { .btn-app span { display: none; } .btn-app { padding: 8px 10px; } }

/* Le menu du téléphone et de la tablette. Un <details> : il s'ouvre sans JavaScript, donc
   il fonctionne même si le script n'est jamais arrivé — ce qui arrive, ici. */
.burger { display: none; position: relative; }
.burger summary {
  list-style: none; cursor: pointer; width: 42px; height: 42px; flex-shrink: 0;
  border: 1.5px solid var(--bord); border-radius: 12px; color: var(--vert-fonce);
  display: flex; align-items: center; justify-content: center;
}
.burger summary::-webkit-details-marker { display: none; }
.burger[open] summary { background: var(--tendre); }
.burger .fermer { display: none; }
.burger[open] .ouvrir { display: none; }
.burger[open] .fermer { display: block; }
/* Un panneau posé sous le bouton, pas une pleine largeur : six liens n'ont pas besoin de
   tout l'écran, et voir la page derrière rappelle qu'on n'a pas changé d'endroit. */
.burger-panneau {
  position: absolute; right: 0; top: calc(100% + 12px); width: max-content; min-width: 208px;
  max-width: min(84vw, 280px); background: #fff; border: 1px solid var(--bord); border-radius: 14px;
  box-shadow: 0 16px 38px rgba(46, 59, 46, .18); padding: 7px; max-height: calc(100vh - 90px); overflow-y: auto;
}
.burger-panneau a {
  display: block; padding: 10px 12px; border-radius: 9px; font-size: 15px; font-weight: 600;
  color: var(--vert-fonce); text-decoration: none; white-space: nowrap;
}
.burger-panneau a:hover { background: var(--tendre); }
/* « Créer un compte » ferme la liste : l'action qu'on veut voir sans la chercher. */
.burger-compte { text-align: center; margin-top: 6px; padding: 11px !important; color: #fff !important; font-size: 14.5px !important; font-weight: 700 !important; }
@media (max-width: 900px) {
  header nav a.masquable, .menu.masquable, .btn.masquable { display: none; }
  .burger { display: block; }
  header nav { gap: 10px; }
  /* Ces trois-là doivent venir APRÈS les règles qu'elles corrigent, pas avant : à
     spécificité égale, c'est l'ordre du fichier qui tranche, et un @media plus haut dans
     la feuille perd contre une règle simple écrite plus bas. */
  .burger summary { width: 44px; height: 44px; }
  .burger-panneau a { padding: 12px; }
  .burger-compte { padding: 13px !important; }
}
@media (max-width: 400px) {
  .logo { font-size: 18px; gap: 7px; }
  .logo img { width: 30px; height: 30px; }
  header .wrap { padding: 0 16px; }
  .langue { padding: 6px 11px; font-size: 13px; }
}

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 12px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: none; cursor: pointer; font-family: inherit; line-height: 1.2;
  transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }
.btn-vert { background: var(--vert); color: #fff; box-shadow: 0 3px 12px rgba(122, 143, 119, .34); }
.btn-vert:hover { background: #6d8269; box-shadow: 0 7px 20px rgba(122, 143, 119, .4); }
.btn-orange { background: var(--orange); color: #fff; box-shadow: 0 3px 12px rgba(198, 93, 42, .3); }
.btn-orange:hover { background: #b45325; box-shadow: 0 7px 20px rgba(198, 93, 42, .36); }
.btn-clair { background: #fff; color: var(--vert-fonce); border: 1.5px solid var(--bord); }
.btn-clair:hover { border-color: var(--vert); color: var(--vert-fonce); box-shadow: var(--ombre-douce); }
.btn-petit { padding: 9px 17px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
button.btn:disabled { opacity: .6; cursor: wait; transform: none; }
/* Au doigt, un bouton fait quarante-quatre pixels — pas quarante-trois. Le rembourrage seul
   laissait passer un pixel ici, trois là, selon la police et la casse du libellé. */
@media (max-width: 900px) { .btn, .btn.btn-petit { min-height: 44px; } }

/* Un lien qui se lit comme une suite : « Voir tout → ». Discret, mais il invite. */
.suite { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 15px; text-decoration: none; }
.suite::after { content: '→'; transition: transform .16s ease; }
.suite:hover::after { transform: translateX(3px); }
/* Ces liens sont seuls sur leur ligne et terminent une section : ils se comportent comme un
   bouton, on les vise comme un bouton. Vingt-trois pixels de haut, c'est un lien de prose. */
@media (max-width: 900px) { .suite { min-height: 44px; } }

/* Héros — le texte à gauche, une vraie photo à droite, et la recherche au milieu du
   parcours de l'œil. La première action de la page est de chercher, pas de s'inscrire. */
.hero { background: linear-gradient(165deg, var(--sable) 0%, #fdfcf8 55%, #fff 100%); padding: clamp(38px, 5.5vw, 66px) 0 clamp(42px, 6vw, 70px); overflow: hidden; }
.hero-grille { display: grid; grid-template-columns: 1.05fr .95fr; gap: 39px; align-items: center; }
.hero h1 { margin-bottom: 11px; }
.hero p.chapo { font-size: clamp(16.5px, 1.4vw, 18px); color: var(--gris); margin-bottom: 18px; max-width: 52ch; }
.hero-note { font-size: 13.5px; color: var(--gris); margin-top: 13px; }
.hero-photo { position: relative; }
.hero-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 24px; box-shadow: 0 22px 54px rgba(46, 59, 46, .2); }
.hero-badge {
  position: absolute; left: -14px; bottom: 26px; background: #fff; border-radius: 15px;
  padding: 13px 17px; box-shadow: 0 10px 30px rgba(46, 59, 46, .18); max-width: 226px;
}
.hero-badge strong { display: block; font-size: 14px; color: var(--vert-fonce); }
.hero-badge strong::before { content: '✓'; color: #fff; background: var(--vert); border-radius: 50%; display: inline-block; width: 17px; height: 17px; line-height: 17px; text-align: center; font-size: 11px; margin-right: 7px; }
.hero-badge span { font-size: 12.5px; color: var(--gris); line-height: 1.45; display: block; margin-top: 2px; }

/* La vitrine : une photo pleine largeur, le nom de ce qu'on fait par-dessus. C'est la
   première chose qu'on voit, et sur un téléphone c'est presque la seule — elle doit dire
   en trois secondes de quoi il s'agit. Le dégradé n'est pas décoratif : sans lui, un texte
   blanc devient illisible dès que la photo s'éclaircit. */
.vitrine { position: relative; isolation: isolate; background: var(--vert-fonce); }
.vitrine-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 32%; z-index: -2; }
.vitrine::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(22, 30, 22, .93) 0%, rgba(28, 38, 28, .82) 42%, rgba(35, 47, 34, .5) 100%);
}
.vitrine-texte { padding: clamp(46px, 7vw, 88px) 22px clamp(44px, 6vw, 76px); color: #fff; }
.vitrine h1 { color: #fff; max-width: 17ch; margin-bottom: 11px; }
.vitrine-slogan { font-size: clamp(16px, 1.5vw, 18.5px); color: #dbe4d8; max-width: 56ch; }
/* Sur un téléphone, un dégradé horizontal noircit toute la largeur et la photo disparaît.
   Vertical, elle respire en haut et le texte reste lisible en bas. */
@media (max-width: 860px) {
  .vitrine::after { background: linear-gradient(to bottom, rgba(22, 30, 22, .42) 0%, rgba(24, 33, 24, .84) 46%, rgba(26, 35, 25, .95) 100%); }
  .vitrine-photo { object-position: center 24%; }
  .vitrine-texte { padding-top: clamp(76px, 22vw, 112px); }
}

/* La recherche vit dans sa propre bande, à cheval sur la vitrine : elle reste la première
   action, sans avoir à cohabiter avec le titre dans un même bloc. */
.recherche-bande { padding: 0 0 clamp(28px, 3.4vw, 42px); background: linear-gradient(to bottom, var(--vert-fonce) 46px, var(--sable) 46px); }

/* Le formulaire — le pays ouvre ses villes, puis on écrit le métier qu'on cherche. */
.recherche { background: #fff; border-radius: 18px; padding: 18px; box-shadow: var(--ombre-levee); border: 1px solid rgba(232, 226, 212, .8); }
.r-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.r-chercher { width: 100%; height: 50px; margin-top: 12px; font-size: 16px; }
.r-champ label { display: block; font-size: 11.5px; font-weight: 800; color: var(--gris-clair); text-transform: uppercase; letter-spacing: .5px; margin: 0 0 5px 2px; }
/* Seize pixels, pas quinze. Sous seize, iOS zoome tout seul dès qu'on touche le champ : la
   page saute, on perd le formulaire de vue, et il faut pincer pour revenir. C'est le premier
   geste de quelqu'un qui cherche un prestataire — il ne doit pas déraper. */
.r-champ select, .r-champ input[type=search] {
  width: 100%; padding: 12px; font-family: inherit; font-size: 16px; font-weight: 600;
  border: 1.5px solid var(--bord); border-radius: 11px; background: #fff; color: var(--vert-fonce); outline: none;
  transition: border-color .12s ease;
}
.r-champ select:focus, .r-champ input:focus { border-color: var(--vert); }
.r-champ select:disabled { background: #f6f4ee; color: #a5a08e; }
.r-libre { margin-bottom: 0; }
/* Une astérisque suffit : « obligatoire » écrit en toutes lettres à côté de deux champs sur
   la même ligne passait à la ligne sur un téléphone. Le mot reste, pour les lecteurs
   d'écran — une astérisque seule ne s'annonce pas. */
.oblig { color: var(--orange); font-weight: 800; }
.lecteur-ecran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Quand personne n'est encore inscrit dans un métier. Ni une erreur, ni un encadré
   d'avertissement : un état de fait, écrit calmement. */
.indispo { background: var(--sable); border: 1px dashed #ddd5c2; border-radius: var(--rayon); padding: 19px 24px; text-align: center; }
.indispo-titre { font-weight: 800; font-size: 17.5px; color: var(--vert-fonce); margin-bottom: 8px; }
.indispo p:last-child { color: var(--gris); font-size: 15px; margin: 0; max-width: 54ch; margin-left: auto; margin-right: auto; }

/* L'invitation à installer, sur les pages métier : c'est l'application qui prévient le jour
   où quelqu'un s'inscrit, donc c'est là qu'il faut la proposer. */
.appli-bloc {
  margin-top: 0; background: var(--sable); color: var(--gris);
  border: 3px solid var(--vert); border-radius: 18px; padding: 20px 26px;
}
.appli-bloc h2 { color: var(--vert-fonce); font-size: 20px; margin-bottom: 11px; }
.appli-bloc .coches { margin-bottom: 14px; }
.appli-bloc .coches li { color: #4a5348; }
.appli-bloc .coches li::before { border-color: var(--vert); }
.appli-bloc .stores-note { margin-top: 11px; color: var(--gris); }

/* Deux appels côte à côte en fin de page métier : devenir prestataire, ou aider. */
.appels-doubles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.appels-doubles h2 { font-size: 20px; margin-bottom: 10px; }
.appels-doubles p { color: var(--gris); font-size: 14.5px; margin-bottom: 12px; }
.appels-doubles .carte { display: flex; flex-direction: column; }
.appels-doubles .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { .appels-doubles { grid-template-columns: 1fr; } }

/* L'invitation à installer, sur une seule ligne : une phrase à gauche, les deux boutons à
   droite. Les vrais badges des stores sont des marques déposées — on ne les redessine pas,
   on écrit leur nom. Et tant que les fiches ne sont pas publiées, les boutons mènent à
   l'application web, ce que la page dit au lieu de le laisser croire. */
.stores { background: var(--vert-fonce); color: #dbe4d8; padding: clamp(21px, 2.59vw, 31px) 0; }
.stores h2 { color: #fff; font-size: clamp(20px, 2vw, 25px); }
/* « Sarréh tient dans votre poche ». Quatre blocs frères dans une grille : le texte, les
   deux écrans, les boutons des magasins, la note de dépôt.

   Une grille et non des conteneurs imbriqués, parce que l'ordre change avec la largeur.
   Auparavant les écrans et les boutons vivaient ensemble dans un `.stores-cote` : les
   boutons étaient donc collés à l'image, du côté droit, et la note flottait seule sous un
   filet pleine largeur. On ne pouvait pas les déplacer sans casser le téléphone.

   Au téléphone, une colonne, dans l'ordre où on lit : le texte, l'écran qui le montre, les
   boutons, puis la note qui les explique. */
.stores-rangee {
  display: grid; gap: 15px; justify-items: center; text-align: center;
  grid-template-areas: "mot" "ecrans" "boutons" "depot";
}
.stores-mot { grid-area: mot; }
.stores-rangee .appli-vitrine { grid-area: ecrans; }
.stores-boutons { grid-area: boutons; }
.stores-depot { grid-area: depot; }
.stores-mot p { color: #a9b8a6; font-size: 15px; margin-top: 7px; max-width: 52ch; }
.stores-depot { color: #8d9e8b; font-size: 13px; max-width: 62ch; margin: 0; line-height: 1.5; }

/* À partir de la tablette : tout le texte à gauche, les écrans à droite.

   Les écrans occupent la colonne de droite sur les quatre rangées — `1fr auto` donne à la
   colonne de gauche ce qui reste, et les deux téléphones prennent la largeur qu'ils font.
   `align-self: center` les centre en face du bloc de texte plutôt que de les coller en haut.

   La rangée `depot` prend `1fr` pour absorber la hauteur restante : sans elle, les trois
   premières rangées s'étireraient et les boutons se décolleraient du texte. */
@media (min-width: 768px) {
  .stores-rangee {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "mot ecrans" "boutons ecrans" "depot ecrans";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(24px, 4vw, 52px); row-gap: 17px;
    justify-items: start; text-align: left; align-items: start;
  }
  .stores-rangee .appli-vitrine { align-self: center; }
  .stores-boutons { margin-top: 3px; }
  /* La note se range sous les boutons, dans la même colonne : c'est d'eux qu'elle parle. */
  .stores-depot { max-width: 46ch; }
}
/* Deux ecrans de l'application, dessines. Une capture d'ecran serait un fichier de plus,
   floue sur un ecran dense, et fausse des le premier changement de l'appli.

   TOUT part de --tel-l. Les telephones se redimensionnent d'une seule valeur : les hauteurs,
   les rayons et les textes en descendent par calcul. Deux tailles ecrites a la main auraient
   diverge au premier ajustement, et un mockup de travers se remarque plus qu'il ne sert. */
/* Deux ecrans de l'application, dessines. Une capture d'ecran serait un fichier de plus,
   floue sur un ecran dense, et fausse des le premier changement de l'appli.

   COPIES SUR DEUX CAPTURES DU TELEPHONE. Les versions d'avant etaient dessinees de tete, ou
   relevees dans le DOM sans voir le rendu, et chaque fois il manquait ce qui se voit :
     - la proportion (un telephone fait 19,5 pour 9, pas 194/338) ;
     - le chassis : l'heure, l'encoche, les onglets, la barre d'accueil ;
     - les icones en trait de lucide, et la grande carte vert fonce de l'accueil ;
     - et enfin l'en-tete de la messagerie, la barre de saisie, et des libelles rognes.

   L'accueil cadre a partir de la barre de recherche : c'est le cadrage de la capture, et
   c'est ce qui rend la place dont les libelles de categories avaient besoin — « Entretien &
   réparations » tient sur deux lignes dans l'application, il etait coupe ici.

   TOUT part de --tel-l. Hauteurs, rayons et textes en descendent par calcul. */
.appli-vitrine {
  --tel-l: 168px;
  display: flex; justify-content: center; align-items: center;
  gap: 0; margin: 24px 0 28px; padding: 6px 0;
}
.tel {
  width: var(--tel-l); flex-shrink: 0;
  aspect-ratio: 194 / 420;                 /* 19,5:9, la proportion d'un telephone */
  background: #171d16;
  border-radius: calc(var(--tel-l) * .155);
  padding: calc(var(--tel-l) * .028);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .18);
}
/* Pas de gap negatif pour les faire se recouvrir : la propriete n'accepte pas de valeur
   negative, le navigateur la ramene a zero SANS RIEN DIRE. C'est une marge. */
.tel-fond { transform: rotate(-7deg) scale(.9); transform-origin: bottom right; z-index: 0; }
.tel-avant { transform: rotate(2.5deg); z-index: 1; margin-left: calc(var(--tel-l) * -.26); }
.tel-ecran {
  position: relative; height: 100%; overflow: hidden; background: var(--sable);
  border-radius: calc(var(--tel-l) * .128);
  display: flex; flex-direction: column;
  font-size: calc(var(--tel-l) * .05); line-height: 1.3;
}
.tel-ecran svg { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
/* ---- Le chassis ---------------------------------------------------------------------- */
.tel-statut {
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
  padding: calc(var(--tel-l) * .05) calc(var(--tel-l) * .07) calc(var(--tel-l) * .016);
  font-size: calc(var(--tel-l) * .05); font-weight: 700; color: var(--encre);
}
.tel-signes { display: flex; align-items: center; gap: calc(var(--tel-l) * .022); }
.tel-signes svg { height: calc(var(--tel-l) * .048); width: auto; fill: currentColor; stroke: none; }
.tel-encoche {
  position: absolute; top: calc(var(--tel-l) * .036); left: 50%; transform: translateX(-50%);
  width: calc(var(--tel-l) * .3); height: calc(var(--tel-l) * .078);
  background: #171d16; border-radius: 99px; z-index: 3;
}
/* La barre du bas : icones lucide en trait, intitules en majuscules, l'actif en vert. */
.tel-onglets {
  flex-shrink: 0; background: #fff;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: calc(var(--tel-l) * .04) calc(var(--tel-l) * .014) calc(var(--tel-l) * .026);
  border-top: 1px solid #e0e0e0;
}
.tel-onglets span { display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--tel-l) * .014); color: #999; min-width: 0; }
.tel-onglets span.actif { color: var(--vert); }
.tel-onglets svg { width: calc(var(--tel-l) * .082); height: calc(var(--tel-l) * .082); }
.tel-onglets b { font-size: calc(var(--tel-l) * .032); font-weight: 700;
  text-transform: uppercase; line-height: 1; }
.tel-accueil {
  display: block; flex-shrink: 0; width: 34%; height: calc(var(--tel-l) * .022);
  margin: 0 auto calc(var(--tel-l) * .036); border-radius: 99px; background: #d3d8d1;
}
/* ---- L'accueil ----------------------------------------------------------------------- */
/* La bande verte du haut : logo rond, le nom en blanc, la cloche et son badge. Meme vert
   que l en-tete de la messagerie — c est la meme barre, dans les deux ecrans. */
.tel-tete { flex-shrink: 0; display: flex; align-items: center;
  gap: calc(var(--tel-l) * .045); background: #6f8a6b; color: #fff;
  padding: calc(var(--tel-l) * .03) calc(var(--tel-l) * .05) calc(var(--tel-l) * .042); }
.tel-logo { width: calc(var(--tel-l) * .12); height: calc(var(--tel-l) * .12); flex-shrink: 0;
  border-radius: 50%; background: #fff; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.tel-logo img { width: 78%; height: 78%; }
.tel-marque { font-weight: 800; font-size: calc(var(--tel-l) * .066); }
.tel-cloche { position: relative; margin-left: auto; flex-shrink: 0;
  width: calc(var(--tel-l) * .105); height: calc(var(--tel-l) * .105); border-radius: 50%;
  background: rgba(255, 255, 255, .22); display: flex; align-items: center;
  justify-content: center; }
.tel-cloche svg { width: 54%; height: 54%; }
.tel-cloche i { position: absolute; top: calc(var(--tel-l) * -.022);
  right: calc(var(--tel-l) * -.022); background: #d9452b; color: #fff; font-style: normal;
  font-weight: 700; font-size: calc(var(--tel-l) * .032); line-height: 1;
  padding: calc(var(--tel-l) * .014) calc(var(--tel-l) * .022);
  border-radius: 99px; }
.tel-bonjour { margin: 0; font-weight: 800; color: var(--vert-fonce);
  font-size: calc(var(--tel-l) * .066); line-height: 1.15; }
.tel-quoi { margin: calc(var(--tel-l) * -.02) 0 0; color: var(--gris);
  font-size: calc(var(--tel-l) * .046); }
.tel-corps { flex: 1; min-height: 0; overflow: hidden;
  padding: calc(var(--tel-l) * .018) calc(var(--tel-l) * .05) calc(var(--tel-l) * .02);
  display: flex; flex-direction: column; gap: calc(var(--tel-l) * .024); }
.tel-recherche { display: flex; gap: calc(var(--tel-l) * .034); flex-shrink: 0; }
.tel-champ { flex: 1; min-width: 0; display: flex; align-items: center;
  gap: calc(var(--tel-l) * .028); background: #fff; border-radius: calc(var(--tel-l) * .05);
  padding: calc(var(--tel-l) * .042) calc(var(--tel-l) * .045); color: #999;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .06); white-space: nowrap; overflow: hidden; }
.tel-champ svg, .tel-loupe svg { width: calc(var(--tel-l) * .06); height: calc(var(--tel-l) * .06);
  flex-shrink: 0; }
.tel-loupe { flex-shrink: 0; width: calc(var(--tel-l) * .13); display: flex; align-items: center;
  justify-content: center; background: var(--vert); color: #fff;
  border-radius: calc(var(--tel-l) * .05); }
/* La grande carte vert fonce sur photo, le morceau qu'on reconnait en premier. La photo est
   deja sur la page : la grille des metiers l'utilise, donc rien de plus a charger. */
.tel-heros { position: relative; overflow: hidden; background: var(--vert-fonce);
  border-radius: calc(var(--tel-l) * .075); flex-shrink: 0; }
.tel-heros img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 70% 30%; }
.tel-voile { position: absolute; inset: 0; background: linear-gradient(90deg,
  rgba(46, 59, 46, .94) 0%, rgba(46, 59, 46, .6) 58%, rgba(46, 59, 46, .15) 100%); }
.tel-heros-mot { position: relative; z-index: 2; display: block; max-width: 86%;
  padding: calc(var(--tel-l) * .032) calc(var(--tel-l) * .05); }
.tel-heros-mot b { display: block; color: #fff; font-weight: 800;
  font-size: calc(var(--tel-l) * .052); line-height: 1.18; }
.tel-heros-mot i { display: block; font-style: normal; color: #f6dabd; font-weight: 700;
  font-size: calc(var(--tel-l) * .04); margin: calc(var(--tel-l) * .012) 0 calc(var(--tel-l) * .03); }
.tel-heros-mot em { display: inline-flex; align-items: center; gap: calc(var(--tel-l) * .024);
  font-style: normal; background: var(--orange); color: #fff; font-weight: 700;
  font-size: calc(var(--tel-l) * .042);
  padding: calc(var(--tel-l) * .026) calc(var(--tel-l) * .044);
  border-radius: calc(var(--tel-l) * .034); }
.tel-heros-mot em svg { width: calc(var(--tel-l) * .052); height: calc(var(--tel-l) * .052); }
.tel-titre { margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(var(--tel-l) * .03); flex-shrink: 0; }
.tel-titre span { font-weight: 800; color: var(--vert-fonce); font-size: calc(var(--tel-l) * .052); }
.tel-titre i { font-style: normal; color: var(--orange); font-weight: 700;
  font-size: calc(var(--tel-l) * .04); }
/* Deux lignes pour le libelle, comme dans l'application : « Entretien & réparations » y tient
   sur deux, et le rogner etait le defaut le plus visible. */
.tel-grille { display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: calc(var(--tel-l) * .03); flex-shrink: 0; }
.tel-grille > span { background: #fff; border: 1px solid #eee;
  border-radius: calc(var(--tel-l) * .05); padding: calc(var(--tel-l) * .03) calc(var(--tel-l) * .006);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--tel-l) * .018); }
.tel-grille > span > i { width: calc(var(--tel-l) * .098); height: calc(var(--tel-l) * .098);
  flex-shrink: 0; border-radius: calc(var(--tel-l) * .035); background: rgba(122, 143, 119, .12);
  display: flex; align-items: center; justify-content: center; color: var(--vert); }
.tel-grille svg { width: 60%; height: 60%; }
/* « Accompagnement » se cassait AU MILIEU DU MOT : word-break: break-word autorise la coupure
   n importe ou, et le mot le plus long de la grille depassait de deux pixels la largeur d une
   carte. On interdit la coupure — les libelles a deux mots vont a la ligne sur l espace, comme
   dans l application — et on descend la taille juste assez pour que le plus long tienne : a
   .036 il faisait quarante-six pixels pour quarante-quatre de place.
   La mesure porte sur le mot le plus long, pas sur celui qu on a sous les yeux. */
.tel-grille b { font-size: calc(var(--tel-l) * .032); font-weight: 700; color: var(--vert-fonce);
  line-height: 1.2; text-align: center;
  word-break: normal; overflow-wrap: normal; hyphens: none; }
/* ---- La messagerie -------------------------------------------------------------------- */
/* L'en-tete : une fleche de retour dans un carre arrondi, DEUX lignes de titre, et le drapeau
   pour signaler. Ce n'est pas un nom centre — c'est ce que montre la capture. */
.tel-fil-tete { flex-shrink: 0; display: flex; align-items: center;
  gap: calc(var(--tel-l) * .045); background: #6f8a6b; color: #fff;
  padding: calc(var(--tel-l) * .03) calc(var(--tel-l) * .045) calc(var(--tel-l) * .045); }
.tel-retour { flex-shrink: 0; width: calc(var(--tel-l) * .115); height: calc(var(--tel-l) * .115);
  border-radius: calc(var(--tel-l) * .035); background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center; }
.tel-signaler { flex-shrink: 0; width: calc(var(--tel-l) * .105); height: calc(var(--tel-l) * .105);
  border-radius: 50%; background: rgba(255, 255, 255, .22);
  display: flex; align-items: center; justify-content: center; margin-left: auto; }
.tel-retour svg { width: 58%; height: 58%; }
.tel-signaler svg { width: 54%; height: 54%; }
.tel-fil-nom { min-width: 0; }
.tel-fil-nom b { display: block; font-weight: 800; font-size: calc(var(--tel-l) * .058);
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tel-fil-nom i { display: block; font-style: normal; font-size: calc(var(--tel-l) * .042);
  color: rgba(255, 255, 255, .82); }
.tel-corps-fil { gap: calc(var(--tel-l) * .03); padding-top: calc(var(--tel-l) * .04); }
.tel-service { display: flex; align-items: center; gap: calc(var(--tel-l) * .04);
  background: #eaeee7; border-radius: calc(var(--tel-l) * .05);
  padding: calc(var(--tel-l) * .042) calc(var(--tel-l) * .05); color: var(--vert); flex-shrink: 0; }
.tel-service svg { width: calc(var(--tel-l) * .075); height: calc(var(--tel-l) * .075); flex-shrink: 0; }
.tel-service b { display: block; color: var(--vert-fonce); font-weight: 800; }
.tel-service i { display: block; font-style: normal; color: var(--gris);
  font-size: calc(var(--tel-l) * .042); }
.tel-bulle { margin: 0; align-self: flex-end; max-width: 78%; flex-shrink: 0;
  background: #dfe8dc; color: var(--vert-fonce);
  border-radius: calc(var(--tel-l) * .05) calc(var(--tel-l) * .05) calc(var(--tel-l) * .012) calc(var(--tel-l) * .05);
  padding: calc(var(--tel-l) * .04) calc(var(--tel-l) * .05); }
/* Deux pixels de vert autour : la bordure de la vraie carte d'offre. */
.tel-offre { background: #fff; border: 2px solid var(--vert); flex-shrink: 0;
  border-radius: calc(var(--tel-l) * .06); padding: calc(var(--tel-l) * .05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .07); }
.tel-offre-tete { margin: 0 0 calc(var(--tel-l) * .03); display: flex;
  justify-content: space-between; align-items: center; gap: calc(var(--tel-l) * .03); }
.tel-offre-tete > span { display: flex; align-items: center; gap: calc(var(--tel-l) * .026);
  font-weight: 800; color: var(--vert-fonce); }
.tel-offre-tete svg { width: calc(var(--tel-l) * .058); height: calc(var(--tel-l) * .058);
  flex-shrink: 0; color: var(--vert); }
.tel-offre-tete i { flex-shrink: 0; font-style: normal; background: #d9ecd7; color: #2f6b2c;
  font-weight: 700; font-size: calc(var(--tel-l) * .036);
  padding: calc(var(--tel-l) * .018) calc(var(--tel-l) * .038);
  border-radius: calc(var(--tel-l) * .034); white-space: nowrap; }
.tel-offre p:not(.tel-offre-tete):not(.tel-cond) { display: flex; justify-content: space-between;
  gap: calc(var(--tel-l) * .03); margin: 0; padding: calc(var(--tel-l) * .016) 0; }
.tel-offre p span { color: #666; }
.tel-offre p b { color: var(--vert-fonce); text-align: right; }
.tel-prix { color: var(--orange); }
.tel-cond { margin: calc(var(--tel-l) * .022) 0 0; color: var(--gris);
  font-size: calc(var(--tel-l) * .04); }
/* La barre de saisie : les deux icones a gauche du champ, la pilule, puis le rond vert. */
.tel-saisie { flex-shrink: 0; display: flex; align-items: center;
  gap: calc(var(--tel-l) * .034); background: #fff; color: #9aa398;
  padding: calc(var(--tel-l) * .036) calc(var(--tel-l) * .04);
  border-top: 1px solid #ececec; }
.tel-saisie > svg { width: calc(var(--tel-l) * .085); height: calc(var(--tel-l) * .085);
  flex-shrink: 0; }
.tel-saisie span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden;
  border: 1px solid #e2e2e2; border-radius: 99px;
  padding: calc(var(--tel-l) * .03) calc(var(--tel-l) * .05); }
.tel-saisie i { flex-shrink: 0; width: calc(var(--tel-l) * .115); height: calc(var(--tel-l) * .115);
  border-radius: 50%; background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.tel-saisie i svg { width: 52%; height: 52%; }
/* Une offre d emploi. Encadree plutot que posee dans le flux : deux postes qui se suivent
   sans separation se lisent comme un seul paragraphe, et on ne sait plus lequel on lit. */
.poste { border: 1px solid var(--bord); border-radius: 16px; padding: 22px 24px;
  background: #fff; margin-bottom: 16px; }
.poste h3 { margin: 2px 0 9px; font-size: clamp(19px, 2.1vw, 23px); color: var(--vert-fonce); }
.poste > p { color: var(--gris); margin: 0 0 13px; }
/* Le lieu et le rythme AVANT le titre : ce sont les deux questions qui decident si on lit
   la suite, et les lire apres coup fait perdre le temps qu on vient de passer. */
.poste-lieu { margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--gris-clair); }
.poste .coches { margin: 0; }
.poste-note { margin: 18px 0 0; color: var(--gris); font-size: 15px; }
@media (max-width: 620px) { .poste { padding: 18px; } }

/* Sous 420 px les deux telephones cote a cote depassaient. Une seule valeur a changer. */
@media (max-width: 420px) { .appli-vitrine { --tel-l: 142px; } }
@media (max-width: 330px) { .appli-vitrine { --tel-l: 124px; } }
/* Le mouvement n'apporte rien ici, mais l'inclinaison peut gener : on la retire pour qui
   demande moins d'effets, plutot que de la garder par principe. */
@media (prefers-reduced-motion: reduce) {
  .tel-fond { transform: scale(.9); }
  .tel-avant { transform: none; }
}

.stores-boutons { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; align-items: center; }
/* Les badges des magasins. Reconnaissables du premier coup d'œil : pavé noir, coins
   arrondis, la marque à gauche, deux lignes à droite — la forme que tout le monde a déjà vue
   mille fois, et qu'on repère sans lire.

   Le liseré clair n'est pas décoratif : la rubrique a un fond vert foncé, et un pavé noir
   posé dessus perdrait ses bords. Sur fond clair il ne se verrait pas, et c'est très bien.

   Le texte dit « Bientôt sur » et non « Téléchargez sur » : les fiches ne sont pas déposées,
   ces boutons ouvrent la version web, et quelqu'un qui a cliqué « App Store » pour recevoir
   un site referme. Le jour de la publication, les deux boutiques fournissent leur artwork
   officiel — qu'elles exigent non modifié — et c'est lui qu'il faudra poser ici. */
.store {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 13px;
  background: #000; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px;
  color: #fff; text-decoration: none;
  transition: border-color .14s ease, transform .14s ease;
}
.store:hover { border-color: rgba(255, 255, 255, .55); transform: translateY(-1.5px); }
.store .store-marque { width: 25px; height: 25px; flex-shrink: 0; }
.store span { display: flex; flex-direction: column; line-height: 1.18; font-weight: 700; font-size: 17px; letter-spacing: -.2px; }
/* La petite ligne est en blanc atténué et non en vert : sur un pavé noir, le vert du site
   vire au sale. */
.store small { font-weight: 500; font-size: 10.5px; letter-spacing: .2px; color: rgba(255, 255, 255, .82); text-transform: none; }
@media (max-width: 620px) {
  .stores-boutons { width: 100%; }
  .store { flex: 1; justify-content: center; }
}

/* Pourquoi Sarréh : le problème, ce que nous faisons, notre but. Trois textes, pas des
   pastilles de garanties — c'est la page « à propos » qui disait le mieux les choses, et
   c'est son plan qui est repris ici. */
.mission { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mission-bloc { border-top: 3px solid var(--orange); padding-top: 14px; }
.mission-num { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--orange); margin-bottom: 10px; }
.mission-bloc h3 { font-size: 19px; margin-bottom: 12px; color: var(--vert-fonce); }
.mission-bloc p { color: #4a5348; font-size: 15px; line-height: 1.48; margin-bottom: 11px; }
.mission-bloc p:last-child { margin-bottom: 0; }
.mission-suite { margin-top: 18px; }
@media (max-width: 900px) { .mission { grid-template-columns: 1fr; gap: 20px; } }

/* Les atouts d'un prestataire : le pictogramme à gauche, le texte à droite. Six arguments
   empilés en cartes faisaient une colonne de vignettes toutes pareilles ; en rangées, l'œil
   descend et lit, au lieu de balayer. */
.atouts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 40px; }
.atout { display: flex; gap: 12px; align-items: flex-start; padding: 18px 0; border-top: 1px solid var(--bord); }
.atout .pastille { flex-shrink: 0; margin-bottom: 0; }
.atout h3 { font-size: 17.5px; margin-bottom: 6px; }
.atout p { color: var(--gris); font-size: 14.5px; margin: 0; }
/* Une colonne, et c'est mesure, pas suppose : en deux colonnes de 160 px ces sept
   arguments passent de 1 313 px a 1 775. Chacun porte un intitule ET une phrase, et a cette
   largeur la phrase se replie sur plus de lignes que la colonne n'en fait gagner. Deux
   colonnes n'aident que sur des blocs vraiment courts — les quatre etapes de l'accueil, par
   exemple, y gagnent 138 px. */
@media (max-width: 820px) { .atouts { grid-template-columns: 1fr; gap: 0; } }

/* Le menu « L'entreprise » — un <details>, donc il fonctionne sans JavaScript. */
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; color: var(--gris); font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: '▾'; font-size: 11px; opacity: .7; }
.menu[open] summary { color: var(--vert-fonce); }
.menu > div {
  position: absolute; top: calc(100% + 14px); right: 0; min-width: 214px; background: #fff;
  border: 1px solid var(--bord); border-radius: 14px; padding: 7px; box-shadow: var(--ombre-levee);
}
.menu > div a { display: block; padding: 9px 11px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: var(--vert-fonce); text-decoration: none; }
.menu > div a:hover { background: var(--tendre); }

/* Sections, et l'en-tête de section : sur-titre, titre, phrase d'accroche. Le même bloc
   partout, pour que chaque page se lise avec le même rythme. */
/* Le rythme vertical. À 82 px entre deux rubriques, on avait l'impression de traverser des
   pages blanches ; à 30 on ne voyait plus où l'une finissait. 58 en haut d'écran large,
   40 sur un téléphone : les rubriques se distinguent sans se perdre de vue. */
section { padding: clamp(24px, 3vw, 40px) 0; }
section.tendre { background: var(--tendre); }
section.sable { background: var(--sable); }
.tete { margin-bottom: clamp(14px, 1.8vw, 22px); }
.tete.centre { text-align: center; margin-left: auto; margin-right: auto; max-width: 720px; }
.tete p.sous { color: var(--gris); font-size: 16.5px; max-width: 62ch; margin-top: 12px; }
.tete.centre p.sous { margin-left: auto; margin-right: auto; }
h2 + p.sous { color: var(--gris); margin: 11px 0 16px; max-width: 62ch; }
.etiquette {
  display: inline-block; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--orange); margin-bottom: 12px;
}
.etiquette::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--orange); vertical-align: middle; margin-right: 9px; margin-bottom: 3px; }
.etiquette.clair { color: #c9d6c4; }
.etiquette.clair::before { background: #c9d6c4; }

/* Les six familles de services. Chacune porte un texte de deux a trois lignes que personne
   ne lisait : cliquer la carte quittait la page avant. La carte se DEPLIE donc sur place.

   Ecrit en <details> et non en JavaScript : le pliage est natif, il marche sans script, le
   clavier le connait, et un moteur de recherche lit le texte replie. */
.familles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.famille {
  background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.famille[open] { border-color: #ded6c3; box-shadow: var(--ombre-douce); }
.famille:hover { border-color: #ded6c3; }

/* Le resume : la photo, le nom, la fleche. C'est la cible — elle fait toute la largeur de
   la carte et bien plus de 44 px de haut. */
.famille-tete {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 28px; align-items: center;
  gap: 13px; cursor: pointer; list-style: none; padding-right: 14px;
}
.famille-tete::-webkit-details-marker { display: none; }
.famille-tete img { width: 76px; height: 76px; object-fit: cover; display: block; }
.famille-nom { font-size: 17.5px; font-weight: 800; color: var(--vert-fonce); letter-spacing: -.012em; line-height: 1.25; }
/* La fleche est dessinee, pas ecrite : un chevron tape au clavier change de forme d'un
   telephone a l'autre, et il ne tourne pas proprement. */
.famille-fleche {
  width: 10px; height: 10px; justify-self: center;
  border-right: 2.2px solid var(--vert); border-bottom: 2.2px solid var(--vert);
  border-radius: 1px; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
.famille[open] .famille-fleche { transform: rotate(-135deg) translate(-2px, -2px); }
.famille-tete:hover .famille-nom { color: var(--orange); }
.famille-tete:hover .famille-fleche { border-color: var(--orange); }

.famille-corps { padding: 2px 16px 15px; }
.famille-corps p { color: var(--gris); font-size: 14.5px; line-height: 1.48; margin-bottom: 10px; }
/* Le lien vient APRES le texte : on propose d'aller plus loin a qui a fini de lire, pas a
   qui vient d'ouvrir. */
.famille-corps .suite { font-size: 14.5px; }

/* Sous les six, la sortie unique. Les cartes ne menent plus nulle part d'elles-memes : sans
   ce bouton, on aurait deplie six textes sans jamais pouvoir chercher. */
.familles-suite { margin-top: 16px; text-align: center; }

@media (max-width: 700px) {
  .familles { grid-template-columns: 1fr; gap: 8px; }
  .famille-tete { grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 11px; }
  .famille-tete img { width: 64px; height: 64px; }
  .famille-nom { font-size: 15.5px; }
  .famille-corps { padding: 0 14px 13px; }
  .famille-corps p { font-size: 14px; }
  .familles-suite .btn { width: 100%; }
}

/* Cartes */
.grille { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(min(430px, 100%), 1fr)); }
/* Trois cartes courtes : sur un téléphone elles n'ont pas besoin de tout l'air des autres. */
@media (max-width: 700px) {
  .grille.serree { gap: 12px; }
  .grille.serree .carte { padding: 12px 18px; }
  .grille.serree .carte h3 { font-size: 16.5px; margin-bottom: 5px; }
  .grille.serree .carte p { font-size: 14px; }
  .grille.serree .pastille { width: 36px; height: 36px; border-radius: 10px; margin-bottom: 11px; }
  .grille.serree .ico { width: 19px; height: 19px; }
}
.carte {
  background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); padding: 19px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.carte:hover { transform: translateY(-2px); box-shadow: var(--ombre-douce); border-color: #ded6c3; }
.carte h3 { margin-bottom: 8px; }
.carte p { color: var(--gris); font-size: 14.5px; }
.pastille {
  width: 44px; height: 44px; border-radius: 13px; background: var(--tendre); color: #4d6149;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}

/* Étapes numérotées, en fil vertical */
ol.etapes { list-style: none; counter-reset: e; }
ol.etapes li { counter-increment: e; position: relative; padding: 0 0 22px 50px; }
ol.etapes li::before {
  content: counter(e); position: absolute; left: 0; top: -1px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--vert); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14.5px; font-weight: 800;
  box-shadow: 0 0 0 5px rgba(122, 143, 119, .13);
}
ol.etapes li:not(:last-child)::after {
  content: ''; position: absolute; left: 15.5px; top: 38px; bottom: 2px; width: 2px; background: var(--bord);
}
ol.etapes li h3 { margin-bottom: 5px; }
ol.etapes li p { color: var(--gris); font-size: 15px; }

/* Une liste de promesses, cochées */
.coches { list-style: none; margin: 0 0 22px; }
.coches li { position: relative; padding-left: 27px; margin-bottom: 8px; font-size: 14.5px; line-height: 1.48; color: #4a5348; }
.coches li::before {
  content: ''; position: absolute; left: 2px; top: 7px; width: 11px; height: 6px;
  border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg);
}

/* La question qu'on se pose vraiment, et la réponse en dessous. Un <details> : il s'ouvre
   sans JavaScript, et le texte reste dans la page pour un moteur de recherche. */
.faq { border-top: 1px solid var(--bord); }
.faq details { border-bottom: 1px solid var(--bord); }
.faq summary {
  list-style: none; cursor: pointer; padding: 19px 40px 19px 0; position: relative;
  font-weight: 700; font-size: 16.5px; color: var(--vert-fonce); line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 6px; top: 27px; width: 10px; height: 10px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: rotate(45deg); transition: transform .2s ease; transform-origin: 70% 70%;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--orange); }
.faq .rep { padding: 0 44px 20px 0; color: var(--gris); font-size: 15px; }
.faq .rep p + p { margin-top: 10px; }

/* Les parcours : cinq blocs dépliables plutôt qu'une page de six écrans. On ouvre celui
   qui nous concerne, et on ne fait pas défiler l'inscription des prestataires quand on
   cherche simplement à supprimer son compte. */
.parcours { display: flex; flex-direction: column; gap: 12px; }
.parcours > details { background: #fff; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; transition: border-color .16s ease, box-shadow .16s ease; }
.parcours > details[open] { border-color: #d8d0bd; box-shadow: var(--ombre-douce); }
.parcours > details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: 15px;
  padding: 14px 46px 14px 19px; position: relative;
}
.parcours > details > summary::-webkit-details-marker { display: none; }
.parcours > details > summary::after {
  content: ''; position: absolute; right: 20px; top: 27px; width: 10px; height: 10px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: rotate(45deg); transition: transform .2s ease; transform-origin: 70% 70%;
}
.parcours > details[open] > summary::after { transform: rotate(-135deg); }
.parcours-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--tendre);
  color: var(--vert-fonce); font-size: 14px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.parcours > details[open] .parcours-num { background: var(--vert); color: #fff; }
.parcours-titre { display: block; font-size: 17.5px; font-weight: 700; color: var(--vert-fonce); line-height: 1.3; }
.parcours-titre small { display: block; font-size: 13.5px; font-weight: 500; color: var(--gris); margin-top: 3px; }
.parcours-corps { padding: 4px 22px 18px 64px; }
.parcours-corps h3 { margin: 14px 0 7px; }
.parcours-texte { color: #4a5348; font-size: 15px; margin-bottom: 12px; }
.parcours-corps ol.etapes li:last-child { padding-bottom: 8px; }
@media (max-width: 620px) {
  .parcours > details > summary { padding: 12px 40px 12px 15px; gap: 12px; }
  .parcours-corps { padding: 2px 16px 15px 16px; }
}

/* Deux boutons côte à côte, y compris sur un téléphone : ils partagent la ligne. */
.actions-ligne { flex-wrap: nowrap; }
.actions-ligne .btn { flex: 1; padding-left: 14px; padding-right: 14px; }
@media (max-width: 420px) { .actions-ligne .btn { font-size: 13.5px; } }

/* Le bandeau d'appel en fin de page : sombre, court, une seule décision à prendre. */
.appel { background: var(--vert-moyen); color: #e4eae1; text-align: center; }
.appel h2 { color: #fff; }
.appel p.sous { color: #a9b8a6; margin: 12px auto 26px; max-width: 56ch; }
.appel .actions { justify-content: center; }
.appel .btn-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .34); }
.appel .btn-clair:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

/* Texte long : pages légales, à propos. Un sommaire collant à gauche — sur une page de
   deux mille mots, savoir où l'on est et pouvoir sauter à la bonne section change tout. */
.doc-grille { display: grid; grid-template-columns: 232px 1fr; gap: 44px; align-items: start; }
.sommaire { position: sticky; top: 92px; }
.sommaire h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--gris-clair); margin-bottom: 12px; font-weight: 800; }
.sommaire a { display: block; padding: 6px 0 6px 13px; border-left: 2px solid var(--bord); color: var(--gris); text-decoration: none; font-size: 14px; line-height: 1.45; transition: color .12s ease, border-color .12s ease; }
.sommaire a:hover { color: var(--vert-fonce); border-left-color: var(--vert); }
/* Sur téléphone le sommaire devient une rangée de pastilles. Ce sont des commandes, pas de
   la décoration : elles font quarante-quatre pixels de haut comme le reste. À trente-trois,
   six pastilles serrées sur deux rangées se touchaient presque, et sur une page de deux
   mille mots on atterrissait deux sections plus loin sans comprendre pourquoi. */
@media (max-width: 900px) {
  .doc-grille { grid-template-columns: 1fr; gap: 20px; }
  /* Le sommaire ne parait pas sur telephone. En colonne laterale il ne coute rien : il
     occupe une place que le texte n'utilise pas. Empile au-dessus, il coutait 329 pixels et
     six rangees de pastilles sur la politique de confidentialite, et le premier mot du texte
     tombait a 683 — sous la ligne de flottaison. On ouvrait une page de deux mille mots et
     on n'en voyait aucun.

     Les ancres des titres restent : elles servent aux liens venus des autres pages. */
  .sommaire { display: none; }
}
.doc h2 { font-size: 22px; margin: 22px 0 11px; scroll-margin-top: 61px; }
.doc h2:first-child { margin-top: 0; }
.doc h3 { font-size: 16.5px; margin: 15px 0 6px; }
/* 68ch : à 880 px et 16 px, une ligne portait 110 caractères. Au-delà de 75 l'œil perd le
   retour à la ligne et relit deux fois la même. Les titres et les tableaux gardent la pleine
   largeur — c'est le texte suivi qui se lit mal long, pas une en-tête. */
.doc p, .doc li { color: #4a5348; font-size: 16px; margin-bottom: 12px; max-width: 68ch; }
.doc ul { padding-left: 22px; }
.doc table, table { width: 100%; border-collapse: collapse; margin: 11px 0 14px; font-size: 14.5px; }
.doc th, .doc td, table th, table td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--bord); vertical-align: top; }
.doc th, table th { color: var(--gris); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px; }
/* Sur un téléphone, deux colonnes n'ont plus la place d'être deux. La colonne de gauche
   tombait à 126 px et « Type, numéro et photos de votre pièce » s'y empilait mot par mot.
   Les deux cellules deviennent deux lignes — l'intitulé au-dessus, la réponse dessous — et
   chacune retrouve toute la largeur. C'est la politique de confidentialité : elle doit se
   lire, pas se déchiffrer. Le « width » posé dans le balisage doit sauter avec le reste. */
@media (max-width: 560px) {
  .doc table, table, .doc tbody, table tbody { display: block; }
  .doc tr, table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--bord); }
  .doc tr:last-child, table tr:last-child { border-bottom: none; }
  .doc th, .doc td, table th, table td {
    display: block; width: auto !important; padding: 0; border: none;
  }
  .doc th, table th { margin-bottom: 5px; }
}
.encadre { background: var(--sable); border: 1px solid var(--bord); border-radius: 14px; padding: 13px 20px; margin: 22px 0; }
.encadre p:last-child { margin-bottom: 0; }
.maj { color: var(--gris); font-size: 13.5px; margin-top: 19px; }

/* Bandeau des pages intérieures — la photo du métier, assombrie pour que le titre reste
   lisible quelle que soit l'image. */
/* Quatre espaces s'additionnaient ici : le remplissage du bandeau en haut et en bas, la
   marge du fil d'Ariane, celle du titre, celle du filtre. Cent-quatre-vingt-dix-huit pixels
   avant d'arriver au contenu, sur une page qui tient parfois en une carte. On resserre les
   quatre ensemble — n'en reduire qu'un aurait donne un bandeau serre d'un cote et lache de
   l'autre. */
.bandeau { position: relative; padding: clamp(20px, 2.4vw, 32px) 0 clamp(18px, 2.2vw, 28px); color: #fff; background: var(--vert-fonce); overflow: hidden; }
.bandeau::before {
  content: ''; position: absolute; inset: 0; background-image: var(--photo);
  background-size: cover; background-position: center 35%; opacity: .4;
}
.bandeau::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(30, 40, 30, .94) 12%, rgba(46, 59, 46, .58) 100%); }
.bandeau .wrap { position: relative; z-index: 2; }
.bandeau h1 { margin: 4px 0 6px; max-width: 20ch; }
.bandeau p { color: #d6dfd4; font-size: 16.5px; max-width: 60ch; }
.bandeau-aide { font-size: 13.5px; color: #a9bda7; margin-top: 12px; }
.fil { font-size: 13px; color: #b3c2b1; }
/* Un fil d'Ariane reste une ligne de texte : le porter à quarante-quatre pixels écarterait
   le titre du bandeau pour un lien que le bouton « retour » du téléphone remplace déjà.
   Sept pixels de marge doublent quand même la surface visée, sans rien déplacer à l'œil. */
.fil a { color: #b3c2b1; text-decoration: none; display: inline-block; padding: 7px 0; }
/* Les sept pixels du haut s'ajoutent au remplissage du bandeau : la cible garde sa surface,
   le bandeau ne paie pas deux fois. */
.bandeau .fil { margin-top: -7px; }
.fil a:hover { color: #fff; text-decoration: underline; }

/* Une fiche de prestataire dans la liste publique */
/* La carte d'un prestataire. Fermee, elle SITUE : le nom de l'activite, le metier, le lieu,
   le prix. Ouverte, elle PROUVE : ce qui a ete verifie, la note, le nombre de prestations, la
   facon de travailler, et le bouton de demande.

   En <details> natif, comme les familles de l'accueil : le pliage marche sans script, le
   clavier le connait, et un moteur de recherche lit ce qui est replie. Un seul ouvert a la
   fois grace au « name » partage — sinon cinq cartes ouvertes font une page ou l'on ne
   compare plus rien. */
.pro { background: #fff; border: 1px solid var(--bord); border-radius: var(--rayon); margin-bottom: 12px; overflow: hidden; transition: box-shadow .16s ease, border-color .16s ease; }
.pro:hover, .pro[open] { box-shadow: var(--ombre-douce); border-color: #ded6c3; }

/* La fleche est calee en HAUT et non au centre : avec quatre lignes d'information, une
   fleche centree verticalement flotte au milieu de nulle part. */
.pro-tete { display: grid; grid-template-columns: 68px minmax(0, 1fr) 16px; gap: 13px; align-items: start; padding: 13px 15px; cursor: pointer; list-style: none; }
.pro-tete::-webkit-details-marker { display: none; }
.pro-tete img { width: 68px; height: 68px; border-radius: 13px; object-fit: cover; display: block; }
.pro-mot { min-width: 0; }
/* Le nom de l'ACTIVITE, pas celui de la personne : c'est sous ce nom qu'on la cherche. */
.pro-nom { display: block; font-size: 16.5px; font-weight: 800; color: var(--vert-fonce); line-height: 1.25; letter-spacing: -.012em; }
/* Une information par ligne, du plus precis au plus general : l'activite, le metier, le
   lieu, puis le prix. Tout tenait sur une ligne separee par des points — quatre choses de
   natures differentes qu'il fallait demeler a la lecture. */
.pro-metier { display: block; font-size: 13.5px; color: #4a5348; margin-top: 3px; }
.pro-ou { display: block; font-size: 13.5px; color: var(--gris); margin-top: 1px; }
/* La proximité se lit d'un coup d'œil, sans concurrencer le nom. « Dans votre quartier »
   est la seule mention qu'on met en vert : c'est celle qui décide. */
.pro-proche { display: block; font-size: 12.5px; font-weight: 700; color: var(--vert-fonce); margin-top: 2px; }
/* Le prix ferme la liste plutot que de flotter a droite : c'est la derniere chose qu'on
   regarde, une fois qu'on sait de qui et de quoi il s'agit. */
.pro-prix { display: block; font-size: 14px; font-weight: 800; color: var(--vert-fonce); margin-top: 6px; }
.pro-fleche { width: 9px; height: 9px; margin-top: 6px; justify-self: center; border-right: 2.2px solid var(--vert); border-bottom: 2.2px solid var(--vert); border-radius: 1px; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; }
.pro[open] .pro-fleche { transform: rotate(-135deg) translate(-2px, -2px); }

.pro-corps { padding: 0 15px 15px; border-top: 1px solid var(--bord); margin-top: 2px; padding-top: 13px; }
.pro-dit { font-size: 14.5px; color: #4a5348; line-height: 1.5; margin-bottom: 12px; }
/* Ce qui a ete verifie. On affiche le FAIT, jamais la valeur : le numero, l'adresse et le
   nom complet restent caches jusqu'au paiement. */
.pro-preuves { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; }
.pro-preuves li { position: relative; padding-left: 23px; font-size: 13.5px; color: #4a5348; line-height: 1.45; }
.pro-preuves li::before { content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 5px; border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); transform: rotate(-45deg); }
/* Ce qui n'est PAS verifie ne disparait pas : une case vide dit quelque chose qu'une ligne
   absente ne dit pas. */
.pro-preuves li.non { color: var(--gris-clair); }
.pro-preuves li.non::before { border-color: #ccc4b2; transform: none; width: 9px; height: 9px; top: 4px; border: 1.5px solid #ccc4b2; border-radius: 3px; }
.pro-compte { font-size: 13.5px; color: var(--gris); margin-bottom: 14px; }
.pro-corps .btn { width: 100%; justify-content: center; }

.prox-note { font-size: 13px; color: var(--gris); margin: 0 0 18px; }
.prox-note strong { color: var(--vert-fonce); }
.prox-note a { color: var(--gris); text-decoration: underline; }
.neuf { background: var(--tendre); color: #5f6f5b; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }

@media (max-width: 560px) {
  .pro-tete { grid-template-columns: 58px minmax(0, 1fr) 14px; gap: 11px; padding: 11px 13px; }
  .pro-tete img { width: 58px; height: 58px; }
  .pro-nom { font-size: 15.5px; }
}

/* Le catalogue complet, rangé par famille. Une rangée de photos qui défile plutôt que
   trente-sept vignettes empilées : sur un téléphone, la page tenait sur six écrans.
   scroll-snap pour que le doigt s'arrête sur une carte, pas entre deux. */
.cat { margin-bottom: 18px; scroll-margin-top: 61px; }
.cat h3 { font-size: 13px; color: var(--gris); text-transform: uppercase; letter-spacing: .7px; margin-bottom: 12px; font-weight: 800; }
.rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 2px 22px 12px; margin: 0 -22px; scrollbar-width: thin;
  /* Sans ceci, le calage aligne la premiere carte sur le BORD du rail et defile de lui-meme
     des le chargement : le rembourrage qui devait l'aligner sur le titre et la phrase
     au-dessus etait avale, et la carte se collait vingt-deux pixels trop a gauche. Meme
     defaut que sur les garanties de l'accueil — le motif « marge negative + rembourrage
     egal » ne se combine pas avec le calage sans le lui dire. */
  scroll-padding-inline: 22px;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: #d5cdb9; border-radius: 3px; }
.rail-carte {
  flex: 0 0 168px; scroll-snap-align: start; position: relative; display: block;
  border-radius: 14px; overflow: hidden; text-decoration: none; box-shadow: 0 3px 12px rgba(46, 59, 46, .1);
}
.rail-carte img { width: 100%; aspect-ratio: 13 / 9; object-fit: cover; transition: transform .35s ease; }
.rail-carte:hover img { transform: scale(1.06); }
.rail-carte span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 12px 11px; color: #fff;
  font-weight: 700; font-size: 14px; line-height: 1.25;
  background: linear-gradient(to top, rgba(18, 25, 18, .88), rgba(18, 25, 18, 0));
}
/* Ce qui dit à un doigt qu'une rangée se fait glisser, c'est le bout de la carte suivante
   qui dépasse. À 168 px fixes il n'en restait que quinze pixels sur un téléphone, et plus
   rien du tout à 320 px : six rangées avaient l'air complètes alors qu'elles cachaient les
   trois quarts du catalogue. En pourcentage, le morceau qui dépasse existe à toute largeur.
   Une carte plus étroite gardait en revanche la même hauteur de libellé, et le bandeau
   finissait par couvrir les deux tiers de la photo : cadrage un peu moins large, libellé un
   peu plus serré, et l'image redevient visible.
   Ce bloc vient APRÈS les règles qu'il corrige, sinon il ne s'applique pas — à spécificité
   égale, c'est l'ordre du fichier qui tranche. */
@media (max-width: 700px) {
  .rail-carte { flex: 0 0 46%; }
  .rail-carte img { aspect-ratio: 5 / 4; }
  .rail-carte span { padding: 15px 10px 9px; font-size: 13px; }
}

/* Un titre de rubrique précédé de son pictogramme, sur la même ligne. */
.titre-ico { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.titre-ico .ico { width: 30px; height: 30px; color: var(--orange); flex-shrink: 0; stroke-width: 1.5; }

/* Le rappel d'installation, réservé à qui a un compte. hidden par défaut : le script du
   pied de page le révèle si une session existe, donc il n'apparaît jamais par erreur. */
.bandeau-app { background: var(--sable); border-bottom: 1px solid var(--bord); }
.bandeau-app .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 15px; padding-bottom: 15px; }
.bandeau-app p { margin: 0; font-size: 14.5px; color: #4a5348; }
.bandeau-app strong { color: var(--vert-fonce); }
/* Les liens croisés : utiles au visiteur, et c'est ainsi qu'un moteur de recherche découvre
   les autres villes et les autres métiers. */
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce { background: #fff; border: 1px solid var(--bord); border-radius: 999px; padding: 9px 15px; font-size: 13.5px; font-weight: 600; color: var(--vert-fonce); text-decoration: none; transition: border-color .12s ease, color .12s ease, box-shadow .12s ease; }
.puce:hover { border-color: var(--vert); color: var(--vert); box-shadow: var(--ombre-douce); }

/* Formulaires — ils vivent sur le site, pas ailleurs. Le formulaire à gauche, et à droite
   ce qui rassure : personne ne crée un compte pour le plaisir de créer un compte. */
.auth { background: linear-gradient(170deg, var(--sable), #fff 62%); padding: clamp(28px, 3.4vw, 46px) 0 clamp(36px, 4.6vw, 60px); }
.auth-grille { display: grid; grid-template-columns: 1fr 400px; gap: 44px; align-items: start; }
.auth-seul { max-width: 480px; }
/* Un bouton qui se lit comme un lien : « mot de passe oublié » n'est pas une action de
   même poids que « se connecter », et ne doit pas en avoir l'air. */
.lien-nu { background: none; border: none; padding: 0; font-family: inherit; font-size: 14.5px; font-weight: 600; color: var(--orange); cursor: pointer; text-decoration: underline; }
.lien-nu:hover { color: #a8491e; }
/* « Mot de passe oublié ? » n'est pas de la prose : c'est la seule issue quand on est
   bloqué devant la connexion. Vingt pixels de haut, sous le champ du mot de passe, et le
   doigt retombait dans le champ. */
@media (max-width: 900px) { .lien-nu { padding: 12px 0; } .contact-valeur a { display: inline-block; padding: 11px 0; } }
/* Le bloc de réinitialisation s'ouvre sous le formulaire, sur la même page : personne n'a
   à ouvrir l'application ni à chercher dans sa boîte pendant qu'il a perdu sa place. */
.reset { border-top: 1px solid var(--bord); margin-top: 15px; padding-top: 16px; }
.reset h2 { font-size: 20px; margin-bottom: 10px; }
.reset-mot { color: var(--gris); font-size: 14.5px; margin-bottom: 11px; }
.auth-carte { background: #fff; border: 1px solid var(--bord); border-radius: 20px; padding: clamp(24px, 3vw, 34px); box-shadow: var(--ombre-douce); }
.auth-carte h1 { font-size: clamp(25px, 2.6vw, 31px); margin-bottom: 7px; }
.auth-intro { color: var(--gris); margin-bottom: 16px; font-size: 15.5px; }
.auth-cote h2 { font-size: 22px; margin-bottom: 12px; }
.auth-pied { margin-top: 15px; font-size: 14.5px; color: var(--gris); text-align: center; }
/* La bascule vers la création de compte. Séparée du formulaire par un trait : ce n'est pas
   une suite du geste de connexion, c'est l'autre chemin. */
.auth-bascule { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--bord); text-align: center; }
.auth-bascule p { color: var(--gris); font-size: 14.5px; margin-bottom: 11px; }
.auth-bascule .btn { width: 100%; }
.auth-legal { margin-top: 10px; font-size: 13px; color: var(--gris); text-align: center; line-height: 1.48; max-width: 68ch; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .auth-grille { grid-template-columns: 1fr; gap: 23px; } .auth-cote { order: -1; } }
.champ { margin-bottom: 11px; }
.champ label { display: block; font-size: 13.5px; font-weight: 700; color: var(--vert-fonce); margin-bottom: 6px; }
.champ input, .champ select {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 16px;
  border: 1.5px solid var(--bord); border-radius: 12px; background: #fff; color: var(--vert-fonce);
  outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.champ input:focus, .champ select:focus { border-color: var(--vert); box-shadow: 0 0 0 3.5px rgba(122, 143, 119, .16); }
.champ .aide { font-size: 12.5px; color: var(--gris); margin-top: 6px; line-height: 1.5; }
.err { display: none; color: #c74242; font-size: 13.5px; font-weight: 600; margin: 4px 0 10px; line-height: 1.5; }
.succes { background: #eaf5ec; border: 1px solid #c8e4cf; color: #2c6b41; border-radius: 12px; padding: 13px 15px; font-size: 14.5px; font-weight: 600; margin: 4px 0 12px; }
.champ textarea {
  width: 100%; padding: 13px 15px; font-family: inherit; font-size: 16px; line-height: 1.48;
  border: 1.5px solid var(--bord); border-radius: 12px; background: #fff; color: var(--vert-fonce);
  outline: none; resize: vertical; transition: border-color .12s ease, box-shadow .12s ease;
}
.champ textarea:focus { border-color: var(--vert); box-shadow: 0 0 0 3.5px rgba(122, 143, 119, .16); }
.deux-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .deux-champs { grid-template-columns: 1fr; gap: 0; } }

/* Le choix du canal de réponse. Deux cartes cliquables plutôt que deux boutons radio
   perdus dans la marge : sur un téléphone, une pastille de 13 px se rate une fois sur trois. */
.canal { border: none; margin: 6px 0 11px; }
.canal legend { font-size: 13.5px; font-weight: 700; color: var(--vert-fonce); margin-bottom: 9px; padding: 0; }
.canal-choix { display: flex; align-items: flex-start; gap: 11px; border: 1.5px solid var(--bord); border-radius: 12px; padding: 13px 15px; margin-bottom: 9px; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.canal-choix:hover { border-color: var(--vert); }
/* Deux canaux cote a cote. « 1fr 1fr » plutot qu un flex : les deux cases gardent la meme
   largeur quel que soit l intitule, et un bouton radio qui saute de trois pixels selon le
   mot a sa droite se remarque plus qu on ne croit. */
.canal-ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.canal-ligne legend { grid-column: 1 / -1; }
.canal-ligne .canal-choix { margin-bottom: 0; align-items: center; padding: 12px 13px; }
/* Sous 380 px, deux cases cote a cote coupent « Par WhatsApp » en deux lignes : elles
   reprennent la pile. */
@media (max-width: 379px) { .canal-ligne { grid-template-columns: 1fr; } }
.canal-choix input { margin-top: 3px; accent-color: var(--vert); width: 18px; height: 18px; flex-shrink: 0; }
.canal-choix:has(input:checked) { border-color: var(--vert); background: #f4f7f3; }
.canal-choix strong { display: block; font-size: 14.5px; color: var(--vert-fonce); }
.canal-choix small { display: block; font-size: 13px; color: var(--gris); margin-top: 2px; }

.contact-grille { display: grid; grid-template-columns: 1fr 340px; gap: 36px; align-items: start; }
.contact-cote { display: flex; flex-direction: column; gap: 12px; }
.contact-valeur { font-size: 17px; font-weight: 800; color: var(--vert-fonce); margin: 2px 0 6px; }
@media (max-width: 900px) { .contact-grille { grid-template-columns: 1fr; gap: 23px; } }

/* La fin de l'accueil : fond sombre, trois cartes claires. Après plusieurs écrans de blanc
   et de sable, l'invitation à rejoindre doit se voir comme une porte. Un vert un peu plus
   clair que le pied de page, sans quoi les deux blocs sombres se collent. */
.famille-sareh { background: var(--vert-moyen); color: #e4eae1; }
.famille-sareh h2 { color: #fff; }
.famille-sareh p.sous { color: #a9b8a6; }
.rejoindre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 19px; }
.voie { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 18px; padding: 23px 25px 20px; }
.voie-num {
  position: absolute; top: -15px; left: 25px; width: 31px; height: 31px; border-radius: 50%;
  background: var(--orange); color: #fff; font-size: 14.5px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(198, 93, 42, .35);
}
.voie h3 { font-size: 19px; margin-bottom: 10px; color: var(--vert-fonce); }
.voie > p { color: var(--gris); font-size: 14.5px; margin-bottom: 11px; }
.voie .coches { margin-bottom: 16px; }
.voie .btn { margin-top: auto; align-self: flex-start; }
.voie .btn-clair { border-color: #dcd6c6; }
.famille-sareh .carte { border-color: rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); }
.famille-sareh .carte:hover { border-color: rgba(255, 255, 255, .28); box-shadow: none; }
.famille-sareh .carte h3 { color: #fff; }
.famille-sareh .carte p { color: #b8c5b5; }
.famille-sareh .pastille { background: rgba(255, 255, 255, .12); color: #cfe0cb; }
@media (max-width: 980px) { .rejoindre { grid-template-columns: 1fr; gap: 22px; } }

@media (max-width: 900px) {
  .hero-grille { grid-template-columns: 1fr; gap: 22px; }
  /* Le titre et la recherche d'abord : une photo carrée en pleine largeur les poussait
     hors de l'écran, et la première chose à faire sur cette page est de chercher. */
  .hero-photo img { aspect-ratio: 16 / 10; border-radius: 20px; }
  .hero-badge { left: auto; right: 12px; bottom: 12px; max-width: 204px; padding: 11px 14px; }
  .hero h1, .hero p.chapo { max-width: none; }
}
/* Les quatre listes ne s'empilent qu'en dessous de 600 px. Sur une tablette il y a la place
   pour deux colonnes, et un formulaire de quatre rangées y occupait la moitié de l'écran. */
@media (max-width: 600px) { .r-ligne { grid-template-columns: 1fr; } }

/* Le conseil « ajoutez à l'écran d'accueil » n'a plus de bloc à lui : la rubrique des
   stores le dit mieux, et à tout le monde. Les règles qui l'habillaient sont parties avec. */

/* Pied de page — deux colonnes de liens sous le bloc de marque, et les mentions légales
   en bas. Cinq colonnes dont une liste de métiers, c'était un annuaire, pas un pied de page. */
footer { background: var(--vert-fonce); color: #cfd6cb; padding: 30px 0 20px; font-size: 14.5px; }
footer .cols { display: grid; gap: 18px 40px; grid-template-columns: 1.5fr 1fr 1fr; margin-bottom: 12px; }
/* Le logo et la phrase sur la même ligne. La phrase ne se coupe pas en deux : « près de
   chez toi » sur une ligne toute seule ne veut rien dire. */
.pied-marque { display: flex; align-items: center; gap: 13px; }
.pied-marque img { width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0; }
.pied-marque p { color: #9aa89a; font-size: 14px; line-height: 1.45; }
footer h4 { color: #fff; font-size: 12.5px; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 8px; }
footer a { color: #cfd6cb; text-decoration: none; display: block; padding: 3px 0; transition: color .12s ease; }
footer a:hover { color: #fff; }
footer .bas { border-top: 1px solid rgba(255, 255, 255, .13); padding-top: 15px; color: #8b9b8b; font-size: 12.5px; line-height: 1.48; }
/* 92ch était plus large que tout le reste du site, et la ligne qui relie Sarréh à D.T. SARL
   l'a rempli d'un coup. Même mesure que les aides. */
footer .bas p { margin-bottom: 7px; max-width: 76ch; }
footer .bas p:last-child { margin-bottom: 0; }
footer .bas strong { color: #b6c3b4; }
footer .bas a { display: inline; color: #b6c3b4; text-decoration: underline; }
/* Le pied de page au téléphone. Deux colonnes thématiques de quatre et six liens laissaient
   deux cases vides à gauche — quatre-vingt-douze pixels de rien, sur cinq cent vingt-six.
   Les deux conteneurs deviennent transparents : leurs liens tombent directement dans la
   grille, qui les répartit en deux colonnes égales. Les intitulés partent avec — « Le
   service » et « Sarréh » servent à ranger trois colonnes sur un écran large, pas à
   expliquer « Nous contacter », qui se lit tout seul.
   Les liens gardent leurs quarante-quatre pixels : sur un téléphone ce pied de page EST la
   navigation, c'est là qu'on va chercher « Devenir prestataire ». C'est le vide autour qui
   se resserre, pas la surface qu'on vise. */
@media (max-width: 720px) {
  footer { padding: 14px 0 10px; }
  footer .cols { grid-template-columns: 1fr 1fr; gap: 0 22px; margin-bottom: 6px; }
  footer .cols > div:not(.pied-marque) { display: contents; }
  footer h4 { display: none; }
  .pied-marque { grid-column: 1 / -1; margin-bottom: 7px; }
  .pied-marque img { width: 34px; height: 34px; }
  .pied-marque p { font-size: 13.5px; line-height: 1.4; }
  /* L'écart entre deux liens se joue sur DEUX chiffres, pas un. L'interligne de 1.6 hérité
     du corps de page mettait déjà neuf pixels de vide autour d'un texte de 14,5 — avant
     même le moindre remplissage. Le resserrer d'abord, puis le remplissage, divise l'écart
     visible par deux (23 px → 12) en ne coûtant que huit pixels de cible.
     La cible tombe à 30 px, sous les 44 recommandés. Assumé ici et nulle part ailleurs :
     ces liens sont rangés en deux colonnes largement séparées, et une erreur de doigt ouvre
     la page voisine du pied de page — on revient en arrière. Sur un bouton qui envoie un
     dossier ou paie une prestation, jamais. */
  footer a { padding: 5px 0; line-height: 1.3; }
  footer .bas { padding-top: 9px; line-height: 1.45; }
  footer .bas p { margin-bottom: 4px; }
}

/* La bande de garanties, juste sous la recherche. L'argument le plus fort — nous gardons
   l'argent jusqu'à la fin — vivait à cinq écrans et demi de défilement sur un téléphone,
   c'est-à-dire nulle part. Il tient maintenant dans la première hauteur d'écran. */
.garanties { background: var(--sable); padding: 0 0 clamp(24px, 3vw, 36px); }
.garanties-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
/* Le picto et l'intitule sur la premiere rangee, le texte sur la seconde et sur toute la
   largeur. En rangee simple, le picto reservait sa colonne sur TOUTE la hauteur de la carte :
   trente pixels de large sur cent-soixante de haut, vides, et le paragraphe se serrait a cote
   pour rien. */
.garantie {
  display: grid; grid-template-columns: 19px minmax(0, 1fr); gap: 5px 10px;
  align-content: start;
  background: #fff; border: 1px solid var(--bord); border-radius: 14px;
  padding: 13px 15px 14px; box-shadow: var(--ombre-douce);
}
.garantie .ico { width: 19px; height: 19px; color: var(--vert); grid-column: 1; grid-row: 1; align-self: center; }
.garantie b { grid-column: 2; grid-row: 1; font-size: 14px; color: var(--encre); align-self: center; }
/* Le texte enjambe les deux colonnes : c'est lui qui reprend la place du picto. */
.garantie span { grid-column: 1 / -1; grid-row: 2; font-size: 13px; color: var(--gris); line-height: 1.45; }
@media (max-width: 900px) { .garanties-grille { grid-template-columns: 1fr 1fr; } }
/* Sur un ecran etroit, les quatre garanties GLISSENT au lieu de s'empiler : deux visibles a
   la fois, les deux autres a portee de pouce. Empilees elles prenaient quatre rangees en
   haut de page, juste la ou l'on veut arriver vite a la recherche ; en liste compacte elles
   se lisaient comme des mentions legales.

   « scroll-snap » cale le glissement sur les cartes : on ne s'arrete jamais au milieu de
   l'une d'elles. Le rembourrage lateral vient de la marge du conteneur reportee ici, sinon
   la premiere carte serait collee au bord. */
@media (max-width: 900px) {
  .garanties-grille {
    display: flex; grid-template-columns: none; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* Sans ceci, le calage aligne la premiere carte sur le BORD du conteneur et defile de
       lui-meme des le chargement : le rembourrage qui devait la remettre au niveau du
       reste de la page etait avale, et la carte se collait dix-huit pixels trop a gauche. */
    scroll-padding-inline: clamp(18px, 2.4vw, 26px);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * clamp(18px, 2.4vw, 26px)); padding: 2px clamp(18px, 2.4vw, 26px) 8px;
  }
  .garanties-grille::-webkit-scrollbar { display: none; }
  /* Le defilement automatique est anime en CSS et non en JavaScript : il s'arrete de
     lui-meme quand le doigt se pose, et il n'existe pas du tout pour qui a demande moins
     d'animations dans son systeme. */
  .garanties-grille[data-auto] { scroll-behavior: smooth; }
  .garantie {
    /* Une seule par ecran, moins un liseré de la suivante : ce bout de carte qui depasse est
       la seule chose qui dise qu'il y en a d'autres derriere. Sans lui, on croit qu'il n'y a
       qu'une garantie.
       Pas de min-height : les elements d'une rangee flex s'etirent deja a la hauteur de la
       plus grande, et en ajouter n'ajoutait que du vide en bas des cartes courtes. */
    flex: 0 0 calc(100% - 26px); scroll-snap-align: start;
  }
}

/* Le lien vers le detail, sous la bande. Les quatre etapes avaient leur rubrique entiere
   plus bas ; elle disait en long ce que ces quatre points disent ici. */
.garanties-suite { margin-top: 12px; text-align: center; }

/* Les quatre étapes. Une bande numérotée : l'ordre est l'information, pas la décoration. */
.etapes-accueil { background: var(--sable); padding: clamp(22px, 2.8vw, 38px) 0; }
.etapes-rangee { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.etapes-rangee li { position: relative; padding-top: 14px; border-top: 3px solid var(--vert); }
.etapes-rangee .etape-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: var(--vert); color: #fff;
  font-size: 13px; font-weight: 800; margin-bottom: 9px;
}
.etapes-rangee h3 { font-size: 16px; margin: 0 0 6px; }
.etapes-rangee p { color: var(--gris); font-size: 14px; margin: 0; }
@media (max-width: 900px) { .etapes-rangee { grid-template-columns: 1fr 1fr; } }
/* Deux par rangee plutot que quatre empilees. Chaque etape tient en un numero, un intitule
   et une phrase : c'est court, et deux colonnes gardent les quatre visibles ensemble — or
   l'interet d'une suite d'etapes est justement de la voir en entier. */
@media (max-width: 560px) { .etapes-rangee { grid-template-columns: 1fr 1fr; gap: 14px 12px; } }

/* Les chiffres. Sombre, comme les boutiques : c'est un moment d'affirmation, pas de lecture. */
.chiffres { background: var(--vert-fonce); color: #dbe4d8; padding: clamp(24px, 2.88vw, 38px) 0; }
.chiffres h2 { color: #fff; }
.chiffres .sous { color: #a9b8a6; }
.chiffres .etiquette.clair { color: #d8a882; }
.chiffres-grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.chiffre { text-align: center; padding: 13px 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px; }
.chiffre b { display: block; font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; color: #fff; line-height: 1; }
.chiffre span { display: block; margin-top: 8px; font-size: 13px; color: #a9b8a6; line-height: 1.4; }
@media (max-width: 700px) { .chiffres-grille { grid-template-columns: 1fr 1fr; } }

/* Partager. Trois boutons, dont WhatsApp — c'est là que le bouche-à-oreille se fait ici. */
.partage { margin-top: clamp(24px, 3vw, 34px); padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); text-align: center; }
.partage p { color: #cbd6c8; font-size: 15px; margin: 0 0 14px; max-width: 60ch; margin-inline: auto; }
.partage-boutons { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.partage-boutons .btn { font-size: 14px; }

/* ---- L'espace du compte, sur le site -------------------------------------------------
   Le site gère le profil, l'identité, la candidature et les annonces ; l'application porte
   le tableau de bord et la messagerie. Cette page ne rejoue donc pas le tableau de bord :
   elle fait ce que le site doit faire, et dit où se trouve le reste. */
.compte-tete { background: var(--vert-fonce); color: #fff; padding: clamp(20px, 2.6vw, 32px) 0 clamp(22px, 2.8vw, 34px); }
/* Sur « Mon compte », le bandeau ne porte qu un fil d Ariane et deux mots : la hauteur des
   pages a photo ne se justifie pas. */
.compte-tete-mince { padding: 12px 0 16px; }
.compte-tete-mince h1 { font-size: clamp(21px, 2.2vw, 26px); margin: 4px 0 0; }
.compte-tete h1 { font-size: clamp(23px, 2.6vw, 30px); margin: 8px 0 4px; color: #fff; }
/* Le sous-titre de bannière traversait les 1200 px du wrap : 159 caractères sur « Déposer
   mon dossier ». Même mesure que `.tete p.sous`, déjà à 62ch. */
.compte-mail { color: #a9bda7; font-size: 14.5px; margin: 0; word-break: break-word; max-width: 62ch; }
.compte-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.etat-pastille { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; }
.etat-ok { background: #e6f2e9; color: #2c6b41; }
.etat-attente { background: #fdf0e2; color: #9a5a24; }
.etat-non { background: #fbe9e9; color: #b33c3c; }
.etat-rien { background: rgba(255, 255, 255, .13); color: #cfd6cb; }
/* Sur fond clair, la pastille « non vérifiée » doit rester lisible : dans le corps de page
   elle reprend le sable, pas le vert translucide du bandeau. */
.compte-corps .etat-rien { background: var(--sable); color: var(--gris); border: 1px solid var(--bord); }
.compte-corps { padding: clamp(24px, 3vw, 38px) 0 clamp(34px, 4vw, 52px); }
.compte-attente { color: var(--gris); font-size: 15px; }
.bloc-compte { background: #fff; border: 1px solid var(--bord); border-radius: 18px; padding: clamp(18px, 2.4vw, 26px); margin-bottom: 11px; box-shadow: var(--ombre-douce); }
.bloc-compte h2 { font-size: 18.5px; margin-bottom: 10px; }
.bloc-aide { color: var(--gris); font-size: 14.5px; line-height: 1.48; margin-bottom: 11px; max-width: 76ch; }
.bloc-note { background: var(--sable); border-radius: 11px; padding: 11px 13px; font-size: 13.5px; color: var(--gris); line-height: 1.48; margin-bottom: 11px; }
.etat-bloc p:last-child { margin-bottom: 0; }
.etat-bloc .actions { margin-top: 10px; }
.bloc-app { background: var(--sable); }
.bloc-app p { color: #4a5348; font-size: 15px; line-height: 1.48; margin-bottom: 11px; }
.liste-resa { list-style: none; margin: 0 0 4px; padding: 0; }
.liste-resa li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--bord); font-size: 14.5px; }
.liste-resa li:last-child { border-bottom: none; }
.resa-quoi { color: var(--vert-fonce); font-weight: 600; }
.resa-etat { color: var(--gris); font-size: 13px; white-space: nowrap; }
/* Sur un téléphone, deux boutons côte à côte dans une carte de compte deviennent deux
   boutons de six centimètres carrés : ils passent l'un sous l'autre, pleine largeur. */
@media (max-width: 560px) {
  .bloc-compte .actions-ligne { flex-direction: column; align-items: stretch; }
  .bloc-compte .actions-ligne .btn { width: 100%; }
}

/* Cases à cocher et boutons radio des formulaires du compte. Chaque ligne est une cible :
   sur un téléphone on vise le libellé, pas le petit carré de dix-huit pixels. */
.cases { display: flex; flex-direction: column; gap: 2px; }
/* La double écriture n'est pas un doublon : `.champ label` et `.champ input` pèsent deux
   classes, `.case` une seule. Sans le préfixe, le libellé repassait en `display: block` —
   le `gap` tombait à zéro et le texte se collait au carré — et la case héritait du
   `width: 100%` et du padding d'un champ texte. */
.case, .champ label.case {
  display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 4px 2px;
  cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.4;
  color: var(--vert-fonce); margin-bottom: 0;
}
.case input, .champ .case input {
  width: 19px; height: 19px; min-width: 19px; flex-shrink: 0; padding: 0; margin: 0;
  accent-color: var(--vert); border-radius: 4px; box-shadow: none;
}
.case:hover span { color: var(--orange); }
/* Ce que le métier impose et qui n'est pas un papier : « ne prescrivez jamais de
   médicament ». Une contrainte de métier se lit avant le formulaire, pas après le refus. */
.liste-regles { list-style: none; margin: 0; padding: 0; }
.liste-regles li { position: relative; padding: 0 0 0 20px; margin-bottom: 10px; font-size: 14.5px; color: #4a5348; line-height: 1.48; }
.liste-regles li::before { content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.liste-regles li:last-child { margin-bottom: 0; }
.papier { padding: 14px 0; border-bottom: 1px solid var(--bord); margin-bottom: 0; }
.papier:last-child { border-bottom: none; padding-bottom: 0; }
.papier label { display: block; font-size: 14px; font-weight: 700; color: var(--vert-fonce); margin-bottom: 6px; }
.papier-option { font-weight: 600; color: var(--gris-clair); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.papier select { width: 100%; padding: 11px 13px; font-family: inherit; font-size: 16px; border: 1.5px solid var(--bord); border-radius: 11px; background: #fff; color: var(--vert-fonce); margin-bottom: 9px; }
/* Un sélecteur de fichier natif déborde de son conteneur sur un petit écran : le nom du
   fichier choisi peut faire quarante caractères et rien ne le coupe. */
.champ input[type=file] { width: 100%; max-width: 100%; font-size: 14px; font-family: inherit; color: var(--gris); }

/* La liste des annonces du prestataire. Une ligne par annonce : le titre, l'état, ce qu'elle
   couvre, et les trois gestes qu'on veut faire dessus. */
/* Mes annonces : une carte par annonce.

   Tout tenait sur une seule phrase à puces — métiers, prix et ville à la suite — et
   « à partir de 2 000 FCFA » se coupait en deux au milieu. Chaque chose a sa ligne, le prix
   a la sienne et sa couleur : c'est le chiffre qu'on vient vérifier.

   La vignette est ce que le client voit en premier dans l'application. La voir ici, c'est
   voir son annonce comme elle est vue. */
.liste-annonces { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.an {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bord); border-radius: 14px; padding: 13px;
}
.an-vignette {
  width: 68px; height: 68px; flex-shrink: 0;
  border-radius: 11px; object-fit: cover; background: var(--sable);
}
/* Une annonce sans photo garde le même gabarit : sans cela les cartes ne s'alignent plus. */
.an-vide { border: 1px dashed var(--bord); background: var(--sable); }
.an-corps { flex: 1; min-width: 0; }
.an-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.an-nom { font-weight: 700; color: var(--vert-fonce); font-size: 15.5px; }
.an-metiers { color: var(--gris); font-size: 13.5px; line-height: 1.45; margin: 0 0 6px; }
.an-prix { font-size: 13.5px; color: var(--gris); margin: 0 0 2px; }
.an-prix b { color: var(--vert-fonce); font-size: 15px; font-weight: 800; }
.an-ou { color: var(--gris-clair); font-size: 13px; line-height: 1.4; margin: 0 0 10px; }
.an-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.an-actions .lien-nu { font-size: 14px; }
/* Supprimer ne se rattrape pas : il se tient à l'écart des deux autres, pas à côté. */
.an-supprimer { margin-left: auto; }
.lien-danger { color: #c74242; }
.lien-danger:hover { color: #a53434; }
/* Les jours de la semaine : sept cases sur une ligne plutôt qu'une colonne de sept. */
.cases-ligne { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; }
.case-courte { min-width: 74px; }
/* Les quartiers : dix-huit à Douala. En une colonne pleine hauteur, le reste du formulaire
   passait sous l'horizon — on ne savait plus qu'il y avait des champs après. Deux colonnes
   dans une boîte qui défile, bordée pour qu'on voie qu'elle a un fond et qu'on peut y
   descendre. */
.cases-quartiers {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px;
  max-height: 236px; overflow-y: auto;
  border: 1px solid var(--bord); border-radius: 12px; padding: 4px 12px; background: #fff;
}
.case-quartier span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Deux colonnes tiennent dès 350 px : « Bonamoussadi » est le nom le plus long et mesure
   moins de 145 px. En dessous, une seule — mieux vaut défiler que couper les noms. */
@media (max-width: 349px) { .cases-quartiers { grid-template-columns: 1fr; } }
.apercus { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.apercu { position: relative; width: 82px; height: 82px; border-radius: 11px; overflow: hidden; border: 1px solid var(--bord); }
.apercu img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Le bouton de retrait fait 28 px, pas 44 : à 44 il couvrirait la moitié de la vignette
   qu'il sert à juger. Il est bordé de blanc pour rester visible sur une photo sombre. */
.apercu-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid #fff; background: rgba(18, 25, 18, .72); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; font-family: inherit; }
.apercu-x:hover { background: #c74242; }

/* ---- La recherche : un champ, et le dictionnaire répond dessous ----------------------
   Elle posait quatre questions — pays, ville, catégorie, service — avant de rendre quoi que
   ce soit. Un seul champ maintenant, et la ville en filtre : on tape « fuite », on voit la
   réponse, on affine après. */
.r-boite { position: relative; }
.r-aide { font-size: 12.5px; color: var(--gris-clair); margin: 7px 0 0 2px; line-height: 1.45; }
.r-bas { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.r-ville { flex: 1; min-width: 0; }
.r-bas .r-chercher { flex: 0 0 auto; margin-top: 0; height: 50px; padding: 0 26px; }
@media (max-width: 460px) {
  /* Côte à côte, le bouton écrase le sélecteur de ville en dessous de sa lisibilité. */
  .r-bas { flex-direction: column; align-items: stretch; }
  .r-bas .r-chercher { width: 100%; }
}
/* Le panneau de propositions. Posé PAR-DESSUS la page, jamais en la poussant : une liste qui
   déplace le contenu sous le doigt fait rater ce qu'on visait. */
.r-props {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
  list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--bord); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(46, 59, 46, .2);
  max-height: min(62vh, 400px); overflow-y: auto;
}
.r-props li { border-radius: 10px; }
.r-props a {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center;
  padding: 8px 12px; text-decoration: none; color: var(--vert-fonce);
}
.r-props li.actif, .r-props li:hover { background: var(--tendre); }
.r-prop-nom { font-weight: 700; font-size: 15px; }
.r-prop-cat { font-size: 12.5px; color: var(--gris); }
/* Le mot qui a mené là : « fuite → Plomberie » se lit tout seul, et apprend le vocabulaire
   du catalogue sans jamais l'imposer. */
.r-via { color: var(--orange); font-weight: 700; }
.r-via::before { content: '· '; color: var(--gris-clair); font-weight: 400; }

/* Le filtre de ville, dans le bandeau des pages de résultats. La ville était enfouie dans
   le fil d'Ariane : pour voir Yaoundé il fallait revenir en arrière et refaire la recherche. */
.bandeau-ville { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.bandeau-ville label { font-size: 13px; color: #a9bda7; font-weight: 700; }
.bandeau-ville select {
  min-height: 44px; padding: 8px 14px; font-family: inherit; font-size: 16px; font-weight: 700;
  color: #fff; background: rgba(255, 255, 255, .12); border: 1.5px solid rgba(255, 255, 255, .28);
  border-radius: 999px; cursor: pointer;
}
/* Une liste déroulante ouverte est dessinée par le système : sur fond sombre, un texte blanc
   sur fond blanc. Les options reprennent donc les couleurs de la page. */
.bandeau-ville option { color: var(--vert-fonce); background: #fff; }
.bandeau-ville select:hover { border-color: rgba(255, 255, 255, .5); }

/* L attribut « hidden » du navigateur vaut « display: none » — mais c est une regle du
   navigateur, et la moindre regle ecrite ici qui pose un display la bat. Un bloc en
   display:grid marque hidden restait donc VISIBLE : la page d inscription affichait
   « Vous etes deja connecte » ET le formulaire, l un sous l autre. Une ligne referme la
   classe entiere de ce defaut, partout et pour toujours. */
[hidden] { display: none !important; }

/* La fin de la page du compte. « Se déconnecter » et « Supprimer mon compte » ne sont pas
   ce qu'on vient y faire : au rang visuel d'un bouton plein, à côté de « Enregistrer », on
   les propose. En texte cliquable, on les laisse disponibles sans les suggérer. */
.bloc-fin { background: none; border: none; box-shadow: none; padding: 4px 0 0; margin-bottom: 0; }
.liens-compte { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.liens-compte .lien-nu { min-height: 44px; font-size: 14.5px; }

/* Une fiche : un intitulé à gauche, la réponse à droite. C'est de l'information qu'on lit,
   pas une action qu'on déclenche — donc pas de cartes ni de gros boutons, et des lignes
   serrées : trente-quatre pixels, un filet fin, rien de plus. */
.ligne-fiche { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 7px 0; border-bottom: 1px solid var(--bord); }
.ligne-fiche:first-child { padding-top: 0; }
.ligne-fiche:last-of-type { border-bottom: none; }
.lf-cle { flex: 0 0 auto; min-width: 118px; font-size: 13px; font-weight: 700; color: var(--gris-clair); }
.lf-val { flex: 1; min-width: 0; font-size: 14.5px; color: var(--vert-fonce); line-height: 1.45; }
.lf-note { color: var(--gris); font-weight: 400; font-size: 13px; margin-left: 9px; }
.lf-vide { color: var(--gris-clair); font-style: italic; }
.etat-bloc .liens-compte { margin-top: 6px; }
/* Elles ne s'empilent qu'en dessous de 340 px. Au-dessus, l'intitulé et la réponse tiennent
   côte à côte : empiler doublait la hauteur de chaque ligne pour rien. */
@media (max-width: 340px) {
  .ligne-fiche { flex-direction: column; gap: 1px; }
  .lf-cle { min-width: 0; }
  .lf-note { margin-left: 0; display: block; }
}

/* La note en tête du compte : ce que le site fait, ce qu'il ne fait pas. Deux lignes, une
   fois. Plus bas c'est trop tard ; en pavé avec un gros bouton, c'est de la réclame. */
.note-site { background: var(--sable); border-left: 3px solid var(--vert); border-radius: 0 12px 12px 0;
  padding: 12px 15px; font-size: 14.5px; color: #4a5348; line-height: 1.48; margin-bottom: 11px; }

/* Les rubriques : une ligne, un titre, ce qu'on y trouve, une flèche. Ce qui n'existe pas
   pour cette personne n'apparaît pas — une rubrique grisée est une promesse qu'on ne tient
   pas. */
.rubriques { display: block; margin-bottom: 11px; }
.rubrique {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  background: #fff; border: 1px solid var(--bord); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 8px; text-decoration: none;
  box-shadow: var(--ombre-douce); transition: border-color .12s ease, transform .12s ease;
}
.rubrique:hover { border-color: var(--vert); transform: translateY(-1px); }
.rub-titre { grid-column: 1; font-weight: 700; font-size: 15.5px; color: var(--vert-fonce); }
.rub-note { grid-column: 1; font-size: 13px; color: var(--gris); margin-top: 2px; line-height: 1.4; }
.rub-fleche { grid-column: 2; grid-row: 1 / -1; font-size: 22px; color: var(--gris-clair); padding-left: 12px; }
/* Celle qui mène à l'application se distingue : c'est la seule qui quitte le site. */
.rubrique-app { background: var(--vert-fonce); border-color: var(--vert-fonce); }
.rubrique-app .rub-titre { color: #fff; }
.rubrique-app .rub-note { color: #a9bda7; }
.rubrique-app .rub-fleche { color: #7d9179; }
.rubrique-app:hover { border-color: var(--vert); }

/* La fenêtre de modification. Le profil se lit ; on ne le modifie que si on l'a décidé. */
.fenetre { position: fixed; inset: 0; z-index: 60; background: rgba(20, 28, 20, .55);
  display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.fenetre-boite { background: #fff; width: 100%; max-width: 480px; max-height: 92vh;
  border-radius: 20px 20px 0 0; display: flex; flex-direction: column; overflow: hidden; }
.fenetre-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px 12px; border-bottom: 1px solid var(--bord); }
.fenetre-tete h2 { font-size: 17.5px; margin: 0; }
.fenetre-x { width: 44px; height: 44px; flex-shrink: 0; border: none; background: none;
  font-size: 17px; color: var(--gris); cursor: pointer; font-family: inherit; border-radius: 10px; }
.fenetre-x:hover { background: var(--sable); color: var(--vert-fonce); }
.fenetre-corps { padding: 12px 18px 15px; overflow-y: auto; }
/* Sur un écran large, la fenêtre se centre au lieu de coller au bas : venue du bas sur un
   téléphone elle est à portée du pouce, sur un ordinateur elle serait seulement bizarre. */
@media (min-width: 640px) {
  .fenetre { align-items: center; padding: 16px; }
  .fenetre-boite { border-radius: 20px; }
}

/* ---- Une seule feuille, pas une pile de boîtes ---------------------------------------
   Six cartes blanches empilées, chacune avec sa bordure et son ombre : on voit les bords
   avant de lire ce qu'il y a dedans. Une surface, des filets entre les blocs. */
.feuille { background: #fff; border: 1px solid var(--bord); border-radius: 18px; box-shadow: var(--ombre-douce); margin-bottom: 11px; overflow: hidden; }
.feuille-bloc { padding: clamp(15px, 2vw, 20px) clamp(16px, 2.2vw, 22px); border-bottom: 1px solid var(--bord); }
.feuille-bloc:last-child { border-bottom: none; }
.feuille-bloc h2 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--gris-clair); margin-bottom: 10px; }
.feuille-bloc .liens-compte { margin-top: 10px; }
/* Le geste porté par une ligne de fiche : « Identité — Non vérifiée · Vérifier ». */
/* Les deux liens qui font tout sur cette page — « Ajouter mon numéro », « Vérifier mon
   identité ». Ils mesuraient dix-huit pixels de haut : la hauteur du texte, rien de plus.
   Le remplissage seul ne suffisait pas — il poussait la ligne de base vers le bas et faisait
   grandir la ligne de moitié. La marge négative le reprend exactement : la ligne garde sa
   hauteur, la surface qu'on vise passe de dix-huit à trente-quatre pixels.
   Contrairement aux liens du pied de page, ceux-ci ne sont pas rangés en colonnes séparées :
   ils se suivent d'une ligne à l'autre, et se manquer ouvre l'autre vérification. */
.lf-agir { color: var(--orange); font-weight: 700; font-size: 13.5px; text-decoration: underline;
  margin: -8px 0 -8px 9px; white-space: nowrap; display: inline-block; padding: 8px 0; }
.lf-agir:hover { color: #a8491e; }

/* L'aperçu des réservations : ce qu'on vient vérifier en passant, pas un compteur. */
.resa-quoi { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.resa-quand { font-size: 12.5px; color: var(--gris-clair); font-weight: 400; }
.resa-reste { font-size: 13px; color: var(--gris-clair); }

/* La seule chose qui quitte le site, et le seul bloc plein de la page. */
.carte-app {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  background: var(--vert-fonce); border-radius: 18px; padding: 15px 18px;
  text-decoration: none; margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(46, 59, 46, .22);
  transition: transform .14s ease, box-shadow .14s ease;
}
.carte-app:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(46, 59, 46, .3); }
.carte-app img { border-radius: 12px; display: block; }
.ca-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ca-titre { color: #fff; font-weight: 800; font-size: 16px; }
.ca-note { color: #a9bda7; font-size: 13px; line-height: 1.4; }
.ca-fleche { color: #7d9179; font-size: 26px; line-height: 1; }

/* « Se déconnecter » puis, à la ligne, « Supprimer ce compte ». Côte à côte, la seconde se
   lisait comme une variante de la première. */
/* Alignes sur le texte des cartes. A deux pixels du bord, ils appartenaient a la page
   plutot qu au compte — le rembourrage reprend celui d une carte. */
.liens-fin {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding-left: calc(clamp(18px, 2.4vw, 26px) + 1px);
}
.liens-fin .lien-nu { min-height: 44px; font-size: 14.5px; }

/* Un bouton qui n'a pas besoin de crier : centré, de la largeur de son libellé. Pleine
   largeur, il pesait autant que « Enregistrer » sur un formulaire — or il propose, il
   n'exige rien. */
.vers-app { display: flex; justify-content: center; margin-top: 4px; }
.vers-app .btn { min-height: 44px; }

/* Les demandes de prestataire : une ligne chacune — le service, quand elle est partie, où
   elle en est. Une seule ligne d'état ne suffisait pas : quelqu'un qui a déposé deux
   dossiers n'en voyait qu'un, et croyait l'autre perdu. */
.demandes { list-style: none; margin: 0 0 14px; padding: 0; }
.demandes li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bord); }
.demandes li:first-child { padding-top: 0; }
.demandes li:last-child { border-bottom: none; padding-bottom: 0; }
.dem-quoi { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-weight: 700; font-size: 14.5px; color: var(--vert-fonce); }
.dem-quand { font-size: 12.5px; color: var(--gris-clair); font-weight: 400; }
/* Le motif d'un refus : sur sa propre ligne, sans pastille en face — c'est une phrase, pas
   un état. */
.demandes .dem-motif { display: block; font-size: 13.5px; color: var(--gris); line-height: 1.5; padding-top: 0; border-bottom: 1px solid var(--bord); }

/* La rubrique « Pourquoi Sarréh » ne porte plus que deux blocs : le troisième répétait,
   mot pour mot par endroits, la bande des garanties et les quatre étapes. Sans cette
   règle, la grille en gardait trois et laissait une colonne vide sur un écran large. */
/* Une colonne. En deux, les deux blocs se lisaient comme une comparaison — le probleme
   D'UN COTE, la vision DE L'AUTRE — alors qu'ils se suivent : voila ce qui ne va pas, voila
   ou nous allons. L'un sous l'autre, l'ordre redevient lisible. */
.mission-deux { grid-template-columns: 1fr; gap: 14px; }

/* UNE SEULE MESURE POUR TOUTE LA RUBRIQUE.
 *
 * Releve sur un ecran de 1740 px : le titre faisait 1156 px, le bloc 760, et le paragraphe
 * 550 a l'interieur. Trois largeurs empilees, dont 210 px de vide DANS le bloc — le texte
 * paraissait pousse dans un coin, et chaque ligne semblait s'arreter trop tot.
 *
 * La mesure du texte etait pourtant bonne, 68 caracteres. Ce qui n'allait pas, c'est que
 * rien autour ne s'y accordait. Le bloc prend donc exactement la mesure du texte, et le
 * titre s'y range : deux lignes au lieu d'une qui traverse l'ecran. Une colonne, une
 * largeur, un bord droit.
 *
 * Les 68ch de `.mission-bloc p` deviennent inutiles — c'est le bloc qui les porte. */
.pourquoi .mission-deux { max-width: 68ch; }
.pourquoi .tete h2 { max-width: 34ch; }

/* L'exemple dans le champ de recherche. Il etait a la taille du texte saisi et presque
   aussi fonce : on le prenait pour une reponse deja donnee, et on hesite a effacer ce qu'on
   croit avoir ete rempli pour soi. Plus petit et plus clair, il redevient une suggestion.
   Le champ garde ses 16 px — en dessous, un iPhone zoome de lui-meme des qu'on tape. */
.recherche [data-mot]::placeholder {
  font-size: 14px; color: #a8b0a5; opacity: 1;
}
.recherche [data-mot]::-webkit-input-placeholder { font-size: 14px; color: #a8b0a5; }

/* Les chiffres, en deux rangees. L'intitule dit laquelle on lit : ce que Sarreh COUVRE ne
   depend de personne, ce qu'il a FAIT depend de tout le monde. Sans ces deux lignes, on
   prenait les unes pour les autres. */
.chiffres-titre {
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
  color: #9fb39c; margin: 0 0 10px;
}
.chiffres-grille + .chiffres-titre { margin-top: 20px; }

/* Les deux boutons du point 3. Cote a cote tant qu'ils tiennent ; l'un sous l'autre ensuite,
   mais alors de MEME largeur — deux boutons empiles de tailles differentes se lisent comme
   un principal et un secondaire, alors qu'ils valent pareil. */
.voie-boutons { display: flex; flex-wrap: wrap; gap: 9px; margin-top: auto; }
.voie-boutons .btn { margin-top: 0; flex: 1 1 auto; justify-content: center; }
@media (max-width: 1080px) {
  .voie-boutons { flex-direction: column; align-items: stretch; }
  .voie-boutons .btn { width: 100%; }
}

/* Les deux rangees de chiffres glissent aussi. Elles ne defilent PAS toutes seules, elles :
   trois carrousels automatiques sur une meme page, et plus rien ne se lit. Seules les
   garanties avancent d'elles-memes. */
@media (max-width: 900px) {
  .chiffres-grille {
    display: flex; grid-template-columns: none; gap: 10px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    /* Sans ceci, le calage aligne la premiere carte sur le BORD du conteneur et defile de
       lui-meme des le chargement : le rembourrage qui devait la remettre au niveau du
       reste de la page etait avale, et la carte se collait dix-huit pixels trop a gauche. */
    scroll-padding-inline: clamp(18px, 2.4vw, 26px);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin: 0 calc(-1 * clamp(18px, 2.4vw, 26px)); padding: 2px clamp(18px, 2.4vw, 26px) 6px;
  }
  .chiffres-grille::-webkit-scrollbar { display: none; }
  .chiffre { flex: 0 0 46%; scroll-snap-align: start; }
}
/* Le mot qui precede les statistiques. En clair sur le vert fonce, et pas en blanc : il
   accompagne les chiffres, il ne leur dispute pas la vedette. */
.chiffres-mot {
  color: #b7c7b4; font-size: 14px; line-height: 1.5; max-width: 60ch; margin: -4px 0 12px;
}

/* La phrase qui presente une famille, entre son titre et ses photos. Elle respire moins que
   le titre : c'est un sous-titre, il ne doit pas se disputer avec lui. */
.cat-mot {
  color: var(--gris); font-size: 14px; line-height: 1.45; max-width: 62ch;
  margin: -4px 0 11px;
}

/* Le catalogue et la carte de l'application se suivent immediatement : « voici les metiers »,
   puis « voici ou les reserver ». Deux respirations de section s'additionnaient entre les
   deux — quarante-deux pixels — la ou une seule suffit. Les deux fonds sont identiques, donc
   rien ne separe visuellement ce vide de ce qui l'entoure : il ne se lit pas comme une
   respiration, seulement comme un trou. */
.catalogue-bas { padding-bottom: 4px; }
.appli-suite { padding-top: 10px; }

/* Un filet d'air avant le pied de page. La derniere rubrique et le pied se touchaient, et
   quand les deux sont sombres — l'appel vert moyen, le pied vert fonce — ils font une seule
   masse ou l'oeil ne trouve plus la limite.

   La marge se pose sur le PIED. Une premiere version visait « .appel:has(+ footer) » et ne
   pouvait rien trouver : le pied est frere de <main>, pas de la rubrique qui le precede.
   Ici, une seule regle, valable sur toutes les pages, et sans effet de bord : elle n'expose
   que le fond du corps. */
footer { margin-top: 7px; }

/* La derniere famille du catalogue ne garde pas sa marge : elle ouvrait dix-huit pixels de
   plus juste avant la carte de l'application, alors que les deux rubriques se suivent. */
.cat:last-of-type { margin-bottom: 0; }

/* Les trois portes de fin de catalogue. Empilees au telephone, en colonnes des qu'il y a la
   place : trois boutons sur une ligne a 375 px feraient cent cinq pixels chacun, et
   « Recommander un prestataire » n'y tient pas.

   Meme poids visuel pour les trois. Ce sont trois propositions paralleles — en remplir une
   et laisser les deux autres en contour inventerait une hierarchie que rien ne justifie. */
.trois-portes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; }
.porte { display: flex; flex-direction: column; }
.porte h3 { color: #fff; font-size: 17.5px; margin-bottom: 8px; }
.porte p { color: #a9b8a6; font-size: 14.5px; line-height: 1.48; margin-bottom: 14px; }
/* Le lien termine la phrase au lieu de la suivre en pavé. Sur ce fond vert, il prend le
   blanc du titre : en orange il crierait plus que le titre lui-meme. */
.porte .suite { color: #fff; }
.porte .suite:hover { color: #d8c3a8; }
/* La fleche passe AVANT le mot, dans ces trois-la seulement. Elle reste apres partout
   ailleurs sur le site : ces trois sorties sont une liste d'actions — la fleche pointe
   l'entree —, les autres sont des « lire la suite », ou elle indique ou l'on part. */
.porte .suite::after { content: none; }
.porte .suite::before { content: '→'; transition: transform .16s ease; }
.porte .suite:hover::before { transform: translateX(3px); }
/* Dans la troisieme porte, le lien est un BOUTON : il n'emmene nulle part, il ouvre un
   choix. Il faut donc lui retirer l'apparence que le navigateur donne aux boutons. */
.porte button.suite { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; cursor: pointer; }

/* Les deux moyens de recommander, une fois le choix ouvert. */
/* La meme porte, mais sur fond clair. .porte est ecrite pour la bande sombre du catalogue :
   son texte est blanc, et pose telle quelle sur la page Carrieres elle serait invisible. */
/* Le titre d une carte devient un lien : le detail, les conditions et le bouton Postuler
   vivent sur leur page. Sans soulignement — la carte entiere se lit comme une entree. */
.poste h3 a { color: inherit; text-decoration: none; }
.poste h3 a:hover { color: var(--orange); }
.poste-suite { margin: 14px 0 0; }
/* Le paragraphe qui presente Sarreh, en tete d une annonce : quelqu un qui arrive par un
   lien partage ne sait pas ou il est, et une liste de missions ne le lui apprend pas. */
.intro-poste { color: var(--gris); font-size: 16px; line-height: 1.52; margin: 0 0 30px;
  padding-bottom: 24px; border-bottom: 1px solid var(--bord); }
/* Le poste, dans le formulaire : on rappelle a quoi on postule, parce que le modal se ferme
   sur la page et qu on peut avoir ouvert les deux annonces. */
.po-poste { margin: 0 0 16px; font-weight: 800; color: var(--vert); font-size: 14px;
  text-transform: uppercase; letter-spacing: .04em; }
.tiroir input[type=file] { width: 100%; font-size: 14.5px; color: var(--gris);
  padding: 9px 0; }
.tiroir input[type=file]::file-selector-button { font: inherit; font-weight: 700;
  color: var(--vert-fonce); background: var(--tendre); border: 1px solid var(--bord);
  border-radius: 9px; padding: 9px 14px; margin-right: 11px; cursor: pointer; }

.porte-partage { border-top: 1px solid var(--bord); margin-top: 26px; padding-top: 22px; }
.porte-partage h3 { color: var(--vert-fonce); }
.porte-partage p { color: var(--gris); }
.porte-partage .suite { color: var(--orange); }
.porte-partage .suite:hover { color: #a8491e; }

.choix-partage { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.choix-partage .btn { font-size: 14px; }

@media (max-width: 860px) {
  .trois-portes { grid-template-columns: 1fr; gap: 24px; }
  /* Les deux moyens l'un sous l'autre et pleine largeur : cote a cote a 375 px, chacun
     tomberait sous la largeur de son libelle. */
  .choix-partage { flex-direction: column; }
  .choix-partage .btn { width: 100%; }
}

/* Le lien offert a la main quand la copie automatique echoue. Il n'apparait que dans ce
   cas-la : un champ toujours visible ferait croire qu'il faut le remplir. */
.lien-a-copier {
  display: block; width: 100%; margin-top: 8px; padding: 9px 11px; font: inherit;
  font-size: 13px; color: var(--vert-fonce); background: #fff;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 9px;
}

/* Le pied ne remonte plus. Sur une page qui ne remplit pas l'ecran — « aucun professionnel
   inscrit », une seule annonce — il s'arretait avant le bas et laissait du blanc dessous :
   une page qui se termine en l'air a l'air cassee, ou chargee a moitie.

   Le corps devient une colonne, et le contenu principal prend la place restante. C'est le
   seul motif qui tienne quelle que soit la hauteur du contenu ET du pied — une hauteur
   minimale posee sur le contenu se tromperait des que le pied change.

   « dvh » avant « vh » : sur un telephone, la barre d'adresse se retracte au defilement, et
   « 100vh » compte la hauteur SANS elle. Le pied se retrouverait pousse sous le bord de
   l'ecran au chargement. Les deux sont ecrites, la seconde pour les navigateurs qui ne
   connaissent pas encore la premiere. */
body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* Le pied de page reste sous la ligne de flottaison.

   « flex: 1 0 auto » suffisait a le coller en bas, mais il fait un tiers d'un ecran de
   telephone : colle en bas, il COMMENCAIT aux deux tiers, et sur une page a une seule
   annonce on voyait un bandeau vert de liens la ou on cherchait des prestataires.

   Le contenu occupe donc l'ecran entier moins la barre du haut, et le pied commence apres.
   Le prix est un vide sous les pages courtes : c'est assume, mieux vaut du vide qu'un pied
   de page pris pour une rubrique. */
body > main {
  flex: 1 0 auto;
  /* 100vh d'abord pour les navigateurs sans dvh ; sur telephone dvh compte la hauteur
     reelle, barre d'adresse retractee ou non. */
  min-height: calc(100vh - var(--h-tete));
  min-height: calc(100dvh - var(--h-tete));
}

/* Le tiroir de demande. En <dialog> natif : le navigateur pose le fond, retient le clavier
   dedans, ferme sur Echap, et rend la page derriere inerte — quatre choses qu'une fausse
   fenetre en <div> oblige a reecrire, et qu'on reecrit toujours a moitie.

   Il monte du bas sur un telephone plutot que d'apparaitre au centre : c'est le geste de la
   plupart des applications, et le pouce reste pres des champs. */
.tiroir { border: 0; padding: 0; background: none; max-width: 560px; width: 100%; margin: auto auto 0; }
.tiroir::backdrop { background: rgba(20, 28, 20, .55); }
.tiroir-boite {
  background: #fff; border-radius: 20px 20px 0 0; padding: 0 20px 22px;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto;
}
/* L'en-tete reste en haut pendant qu'on defile. Sur un telephone, le clavier occupe la moitie
   de l'ecran : sans cela on perd de vue a qui on ecrit, et la croix de fermeture avec — une
   fenetre dont on ne voit plus la sortie est une fenetre qu'on quitte de travers.

   Le rembourrage du haut est passe du conteneur a l'en-tete : laisse sur le conteneur, le
   contenu defilerait dans les dix-huit pixels au-dessus de l'en-tete collant, visible entre
   lui et le bord. */
.tiroir-tete {
  position: sticky; top: 0; z-index: 2; background: #fff;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 0 12px; margin-bottom: 0;
  border-bottom: 1px solid var(--bord);
}
.tiroir-tete h2 { font-size: 20px; margin: 0; }
/* Le nom de l'annonce sous le titre : on doit savoir a QUI on ecrit sans refermer. */
.tiroir-tete #r-titre-service { font-size: 14.5px; color: var(--gris); margin: 3px 0 0; font-weight: 700; }
/* `font-family: inherit` : un <button> ne l'hérite pas tout seul. Sans cette ligne, la croix
   tombait en Arial — la seule chose de tout le site qui n'était pas en Inter, et un « × »
   d'Arial n'a ni la même largeur ni la même hauteur d'œil que celui d'Inter. */
.tiroir-x {
  background: none; border: 0; font-family: inherit;
  font-size: 26px; line-height: 1; color: var(--gris);
  cursor: pointer; padding: 0 4px; min-width: 44px; min-height: 44px; flex-shrink: 0;
}
.tiroir-x:hover { color: var(--vert-fonce); }
.tiroir .champ { margin-bottom: 12px; }
.tiroir .bloc-aide { margin-bottom: 14px; }
.tiroir #r-go { width: 100%; margin-top: 4px; }
.tiroir .actions-ligne { margin-top: 14px; }
/* La mention d'accompagnement : elle doit se voir, sans etre une alarme. */
.tiroir #r-accompagnement { margin-bottom: 14px; }
.tiroir .r-urgence {
  background: #fff8ec; border: 1px solid #f0dcbf; color: #8a5a13;
  padding: 10px 12px; border-radius: 10px; margin: 10px 0; font-size: 13.5px; line-height: 1.5;
}

/* Sur un grand ecran, la fenetre revient au centre : un tiroir colle en bas de mille pixels
   de haut n'a plus de sens. */
@media (min-width: 620px) {
  .tiroir { margin: auto; }
  .tiroir-boite { border-radius: 20px; }
}

/* L'etoile des champs obligatoires. En orange et non en rouge : le rouge dit « erreur », et
   il n'y en a pas encore. */
.oblig { color: var(--orange); font-weight: 800; margin-left: 3px; }
/* Le seul champ libre le dit en toutes lettres : avec un sur cinq, l'absence d'un signe se
   remarque moins que sa presence. */
.libre {
  margin-left: 6px; font-size: 11.5px; font-weight: 600; color: var(--gris-clair);
  text-transform: none; letter-spacing: 0;
}
/* Le premier champ vient juste sous l'en-tete collant : sans cela, il s'y colle. */
.tiroir #r-envoi > :first-child { margin-top: 14px; }

/* Le titre du tiroir une fois la demande partie. Le vert vient de l'ancienne pastille,
   retiree parce qu'elle repetait mot pour mot ce que l'en-tete colle dit deja. */
.tiroir.envoye .tiroir-tete h2 { color: #2c6b41; }
.tiroir.envoye .tiroir-tete h2::before { content: "✓"; margin-right: 7px; }

/* Un titre de bandeau coupe en deux par un <br>.

   Le <br> impose la coupure, pas que chaque moitie tienne sur sa ligne. Le plancher de h1
   est 30 px, et « Vos clients vous cherchent. » y mesure 387 px quand un telephone de
   375 px n'en offre que 331 : la coupure forcee donnait trois lignes au lieu de deux.

   Sous 460 px la taille suit la largeur de l ecran. Au-dessus, le plancher de 30 px tient
   deja les deux moities sur leur ligne, et rapetisser un titre qui tient serait gratuit. */
/* La laisse de vingt caracteres saute : elle sert quand le navigateur choisit ou couper,
   et ici le <br> l'a deja decide. A 24 px elle vaut 240 px pour une moitie qui en mesure
   320 — la ligne se recoupait a l interieur d elle-meme. */
.bandeau-deux-lignes h1 {
  max-width: none;
  /* La taille se calcule sur la moitie la plus longue, pas sur l ecran seul : la regle
     precedente ne regardait que la largeur, et reglait le francais en laissant l anglais
     — 35 caracteres contre 27 — deborder sur une troisieme ligne.

     --titre-ch porte le nombre de caracteres de la moitie la plus longue ; un caractere de
     cette police mesure environ 0,51 em, 0,52 laisse la marge. Si un jour une moitie
     depasse 27 caracteres, c est cette variable qu il faut poser sur le bandeau — un test
     compare les deux et refuse de laisser filer. */
  font-size: min(clamp(30px, 4.4vw, 46px), calc((100vw - 44px) / var(--titre-ch, 27) / 0.52));
}

/* Le trait de la premiere rangee de cartes.

   Il separe les atouts les uns des autres. Sur la premiere rangee il ne separe rien : il
   tombe juste sous le paragraphe d'introduction, et pose une ligne plus dix-huit pixels
   entre un texte et le premier atout. */
.atouts > .atout:nth-child(-n+2) { border-top: 0; padding-top: 0; }
@media (max-width: 820px) {
  /* Une seule colonne sous 820 px : la premiere rangee n'a qu'une carte, la deuxieme
     retrouve son trait. */
  .atouts > .atout:nth-child(2) { border-top: 1px solid var(--bord); padding-top: 18px; }
}

/* Le probleme a deux faces : celui qui cherche, et celui qu on ne trouve pas. Cote a cote
   parce que c est le MEME probleme vu des deux bouts — empile, on lit deux problemes sans
   rapport, et la page perd ce qui fait de Sarreh une place de marche et non un annuaire. */
.deux-faces { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.face {
  background: #fff; border: 1px solid var(--bord); border-radius: 16px;
  padding: 20px 21px 22px;
}
.face .etiquette { margin-bottom: 7px; }
.face h3 { font-size: 18.5px; margin: 0 0 8px; }
.face p { color: var(--gris); font-size: 15px; margin: 0; }
/* Sous 720 px les deux faces se suivent : cote a cote, chacune ferait quatre mots par ligne. */
@media (max-width: 720px) { .deux-faces { grid-template-columns: 1fr; gap: 11px; } }

/* La date d'entree en vigueur n'est pas un sous-titre : elle dit quelle version engage le
   lecteur le jour ou il lit, et elle n existe nulle part ailleurs dans la page. Plus petite
   et plus discrete que la phrase qu elle remplace — un cachet, pas une accroche. */
.bandeau .en-vigueur { font-size: 13.5px; opacity: .82; margin-top: 5px; max-width: none; }