/* =========================================================================================
   VARIÉTÉ — les compositions qui font qu'une page ne ressemble plus à sa voisine (15/10/2026, Andrea :
   « les pages se ressemblent beaucoup… un peu plus de sections gauche-droite, sans abuser, sans changer de DA »).
   Écrite pour le site, pas une maquette (une « origine » dans banc/empreintes.json) ; chargée seulement par les
   pages qui l'utilisent, APRÈS leurs feuilles. Toutes les classes commencent par « v- ». Rien de neuf en couleur,
   en police ni en effet : les jetons de style.css, les composants de pages.css. Rien n'est lié au
   défilement : les blocs entrent avec .apparait, la photo du haut s'installe au chargement, comme partout.
   Le plan : 08-directions/accueil-10/_audits/variete-pages-2026-10-15.md
   ========================================================================================= */

/* ---------- 1 · LA MOITIÉ PHOTO — le texte dans la colonne du site, la photo de la moitié droite jusqu'au bord de
   l'écran (Recrutement : le haut de page ; l'accueil : la section recrutement). Les lignes de la grille suivent
   .wrap (--max, --pad) : le texte commence exactement là où commence le reste de la page. ---------- */
.v-moitie{display:grid;grid-template-columns:[plein-debut] minmax(var(--pad),1fr) [contenu-debut] minmax(0,calc(var(--max) / 2 - var(--pad)))
  [milieu] minmax(0,calc(var(--max) / 2 - var(--pad))) [contenu-fin] minmax(var(--pad),1fr) [plein-fin]}
.v-moitie-txt{grid-column:contenu-debut/milieu;min-width:0;padding-right:clamp(40px,5vw,80px)}
.v-moitie-img{grid-column:milieu/plein-fin;position:relative;margin:0;overflow:hidden;background:var(--creme)}
.v-moitie-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* le haut de page de Recrutement : le fil d'Ariane en haut ; le titre, le chapô et les gestes CENTRÉS en hauteur sur la
   photo (Andrea, 17/10/2026 : « il y a un petit problème de centrage. Pourquoi t'as centré en bas de l'image ? » — ils
   étaient posés au bas de la colonne). La colonne a la hauteur de la photo : trois rangées, deux égales autour du bloc,
   des marges égales en haut et en bas, donc le centre du bloc tombe sur celui de la photo ; le fil d'Ariane loge dans la
   première rangée. Sous 1024 px (le texte au-dessus de la photo), rien ne change : § 7 */
.pg-tete.v-tete-duo{padding-block:0;min-height:clamp(480px,calc(100svh - 300px),620px)}
.v-tete-duo .v-moitie-txt{display:grid;grid-template-rows:1fr auto 1fr;row-gap:32px;padding-block:22px}
.v-tete-duo .v-moitie-txt > .pg-ariane{align-self:start}
.v-tete-duo-corps{grid-row:2}
.v-tete-duo h1{margin-top:0;max-width:16ch}
.v-tete-duo .pg-tete-pied{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:28px}
.pg-tete.v-tete-duo .pg-tete-pied > .pg-chapo{align-self:auto;max-width:52ch}
/* la photo s'installe au chargement, comme celle des en-têtes sur photo (pages.css § 1) */
.js .v-tete-duo .v-moitie-img img{transform:scale(1.04)}
.js.pret .v-tete-duo .v-moitie-img img{transform:none;transition:transform 2.4s var(--ease)}

/* la section recrutement de l'accueil : une bande noire, la photo du coucher de soleil au bord droit */
.sec.v-recrute{padding-block:0;background:var(--charbon);color:#fff}
.v-recrute .v-moitie-txt{padding-block:var(--sec-py)}
.v-recrute h2{max-width:16ch}
.v-recrute .sec-intro{max-width:44ch;color:var(--sur-noir-2)}
.v-recrute :focus-visible{outline-color:#fff}
.v-recrute .v-moitie-img{background:var(--noir)}
.v-gestes{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin-top:34px}
/* un lien fléché sur fond noir */
.lien-fleche.v-clair{color:#fff;background-image:linear-gradient(var(--rouge-sur-noir),var(--rouge-sur-noir))}
.lien-fleche.v-clair .fl{color:var(--rouge-sur-noir)}


/* ---------- 2 · QUI SOMMES-NOUS ---------- */
/* « Ce qu'on fait » : les quatre photos du parc à gauche (deux par deux), le texte à droite */
.v-metier{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(48px,6vw,96px);align-items:center}
.v-metier > .v-galerie{order:-1;margin-top:0}
@media (min-width:1024px){ .v-metier > .v-galerie{grid-template-columns:repeat(2,minmax(0,1fr))} }
.v-metier-txt > h2 + .pg-lead{margin-top:22px}

/* le témoignage : la section des avis, partagée avec l'accueil (§ 9) */


/* ---------- 3 · RECRUTEMENT ---------- */
/* « Les postes ouverts » : le titre et le bouton à gauche, la fiche à droite */
.v-postes .btn{margin-top:30px}
/* la candidature : le formulaire à gauche, le texte et la photo de l'agence à droite (le bandeau devis qui suit,
   texte à gauche, en devient le miroir) */
.v-cand{display:grid;grid-template-columns:minmax(0,572px) minmax(0,1fr);gap:clamp(48px,6vw,96px)}
.v-cand > .b4-cand{order:-1;align-self:start}
.v-cand-txt{display:flex;flex-direction:column}
.v-cand-txt h2{max-width:16ch}
/* la photo prend la hauteur qui reste à côté du formulaire : les deux colonnes finissent ensemble */
.v-cand-img{flex:1 1 auto;min-height:260px;margin-top:36px;aspect-ratio:auto}
.v-cand-img img{position:absolute;inset:0}


/* ---------- 4 · PROPRIANO ---------- */
/* le haut de page en deux colonnes : le titre à gauche, le chapô et les gestes à droite */
.v-tete-ville-corps{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px clamp(48px,6vw,96px);align-items:start;margin-top:22px}
.v-tete-ville h1{margin-top:0}
.v-tete-ville .pg-tete-pied{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:24px;margin-top:0}
.pg-tete.v-tete-ville .pg-tete-pied > .pg-chapo{align-self:auto;max-width:48ch}
/* « Ce qu'on a sur place » : la tête en deux colonnes, le titre à gauche, le texte et le bouton à droite */
.v-sec-tete{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px clamp(48px,6vw,96px);align-items:start;margin-bottom:48px}
.v-sec-tete .sec-intro{margin-top:0;max-width:60ch}
.v-sec-tete .btn{margin-top:24px}
/* « Vous n'avez personne pour la conduire ? » : une bande noire pleine largeur, la question à gauche, le bouton à droite */
.sec.v-bande{padding-block:clamp(3.5rem,4.4vw,4.75rem)}
.v-bande-in{display:flex;align-items:center;justify-content:space-between;gap:24px clamp(40px,5vw,80px)}
.sec .v-bande-t{max-width:24ch;color:#fff}
.v-bande-p{margin-top:12px;max-width:62ch;font-size:var(--t-intro);line-height:1.6;color:var(--sur-noir-2)}
.v-bande-in > .btn{flex:none}


/* ---------- 5 · LE MIROIR — une intro (pg-intro) dont le second bloc passe à gauche (pièces Caterpillar) ---------- */
@media (min-width:1181px){
  .pg-intro.v-miroir{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .pg-intro.v-miroir > :last-child{order:-1}
}


/* ---------- 6 · 1024 → 1180 : on resserre ; ce qui tasserait passe en colonne (R8) ---------- */
@media (max-width:1180px){
  .v-metier{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .v-cand{grid-template-columns:minmax(0,1fr)}
  .v-cand > .b4-cand{order:0}
  .v-cand-txt h2{max-width:none}
  .v-cand-img{display:none}
  .v-tete-ville-corps,.v-sec-tete{grid-template-columns:minmax(0,1fr)}
  .v-sec-tete{margin-bottom:40px}
}


/* ---------- 7 · TABLETTE ET TÉLÉPHONE — sous 1024 px : une colonne, le texte puis la photo ---------- */
@media (max-width:1023px){
  .v-moitie{display:block}
  .v-moitie-txt{padding-inline:var(--pad)}
  .v-moitie-img{aspect-ratio:3/2}
  .pg-tete.v-tete-duo{min-height:0}
  .v-tete-duo .v-moitie-txt{display:flex;flex-direction:column;row-gap:0;padding-block:22px 44px}
  .v-tete-duo .v-moitie-txt > .pg-ariane{align-self:auto}
  .v-tete-duo-corps{padding-top:36px}
  .v-recrute .v-moitie-txt{padding-block:var(--sec-py) 48px}
  .v-metier{grid-template-columns:minmax(0,1fr)}
  .v-metier > .v-galerie{order:0}
  .v-metier-txt{max-width:640px}
  .v-bande-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:767px){
  .v-tete-duo h1{max-width:none}
  .v-gestes{margin-top:28px}
}

/* ---------- 8 · MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  .js .v-tete-duo .v-moitie-img img{transform:none!important;transition:none!important}
}


/* ---------- 9 · LES AVIS — « Ce qu'en disent nos clients », l'accueil et Qui sommes-nous (17/10/2026, Andrea : « il faut
   une vraie section d'avis… plusieurs avis ») ; balisage : components/commun/SectionAvis.astro, textes : data/avis.ts.
   La tête de section porte la note de la fiche Google ; dessous, une grille de cartes (les cartes du témoignage de
   style.css § 9 : fond blanc, filet, coin de 4 px) : le témoignage filmé sur deux colonnes, puis les avis Google, du plus
   long au plus court, qui remplissent la grille sans trou. Rien ne bouge au survol (une carte n'est pas un lien) : seul
   le lien vers la fiche en a un, celui de .lien-fleche, avec son appui au doigt (style.css). Rien n'est lié au défilement.
   Sous 768 px, une rangée qui se balaie au doigt (comme les conseils) et qui prend le focus au clavier (flèches). ---------- */
.v-avis-note{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;gap:14px 18px;flex:none;margin-bottom:4px}
.v-avis-moyenne{margin:0;font:800 clamp(52px,1.4vw + 34px,60px)/.86 var(--f-titre);letter-spacing:-.035em;color:var(--encre);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.v-avis-sur{margin-left:3px;font-size:.4em;font-weight:700;letter-spacing:0;color:var(--muted)}
.v-avis-detail{display:flex;flex-direction:column;gap:8px}
.v-avis-etoiles{display:block;flex:none;align-self:flex-start;width:auto;height:16px;aspect-ratio:136/24;color:var(--rouge);overflow:visible}
.v-avis-note .v-avis-etoiles{height:20px}
.v-avis-etoile-vide{fill:var(--bord-fort)}
.v-avis-total{margin:0;font:600 var(--t-petit)/1.3 var(--f-corps);color:var(--encre);white-space:nowrap}
.v-avis-note .lien-fleche{grid-column:1/-1;justify-self:start;font-size:var(--t-petit)}

/* la grille : trois colonnes ; le témoignage filmé en prend deux (2 + 7 avis = trois rangées pleines) */
.v-avis-defile:focus-visible{outline-offset:-2px}
.v-avis-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.v-avis-item{display:flex;min-width:0}
.v-avis-item--filme{grid-column:span 2}
.v-avis-carte{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;margin:0;padding:28px 30px 24px;background:var(--blanc);
  border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--ombre-repos)}
.v-avis-carte blockquote{margin:18px 0 26px}
.v-avis-carte blockquote p{font:500 17px/1.55 var(--f-titre);letter-spacing:-.003em;color:var(--encre);text-wrap:pretty}
.v-avis-carte figcaption{display:flex;flex-direction:column;gap:3px;margin-top:auto;padding-top:16px;border-top:1px solid var(--bord)}
.v-avis-carte .temoin-qui{display:block;font-size:16px}
/* le témoignage filmé : le guillemet rouge à la place des étoiles, la citation plus grande */
.v-avis-carte--filme{padding:36px 44px 30px}
.v-avis-carte--filme .temoin-guillemet{margin-bottom:18px}
.v-avis-carte--filme blockquote{margin-top:0}
.v-avis-carte--filme blockquote p{font-size:clamp(19px,.5vw + 14px,22px);line-height:1.5;letter-spacing:-.006em;max-width:44em}
.v-avis-carte--filme .temoin-qui{font-size:17px}

/* 1024 → 1180 : on resserre les cartes */
@media (max-width:1180px){
  .v-avis-carte{padding:24px 24px 22px}
  .v-avis-carte--filme{padding:32px 34px 28px}
}
/* tablette : le témoignage filmé sur toute la largeur, puis les avis Google en deux colonnes équilibrées (chaque carte à
   sa hauteur : sept cartes ne remplissent pas deux colonnes d'une grille) */
@media (max-width:1023px){
  .v-avis-liste{display:block;columns:2;column-gap:var(--gout);margin-bottom:calc(-1 * var(--gout))}
  .v-avis-item{display:block;margin-bottom:var(--gout);break-inside:avoid}
  .v-avis-item--filme{column-span:all}
  .v-avis-carte{height:auto}
  .v-avis-carte figcaption{margin-top:0}
  .v-avis-carte--filme blockquote p{font-size:19px}
}
/* téléphone : la tête en colonne (style.css), la note sous le titre ; les cartes en rangée qui se balaie au doigt, chacune
   à sa hauteur ; la suivante dépasse toujours, pour qu'on comprenne qu'il y en a d'autres */
@media (max-width:767px){
  .v-avis-note{margin-bottom:0}
  .v-avis-moyenne{font-size:52px}
  .v-avis-defile{margin-inline:calc(-1 * var(--pad));overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--pad);scrollbar-width:none}
  .v-avis-defile::-webkit-scrollbar{display:none}
  .v-avis-liste{display:grid;width:max-content;columns:auto;grid-template-columns:min(84vw,380px);grid-auto-flow:column;
    grid-auto-columns:min(76vw,300px);align-items:start;gap:16px;margin-bottom:0;padding:2px var(--pad) 8px}
  .v-avis-item{display:flex;margin-bottom:0;scroll-snap-align:start}
  .v-avis-item--filme{grid-column:auto;column-span:none}
  .v-avis-carte{padding:22px 20px 20px}
  .v-avis-carte blockquote{margin:14px 0 22px}
  .v-avis-carte blockquote p{font-size:16px}
  .v-avis-carte--filme{padding:24px 22px 20px}
  .v-avis-carte--filme .temoin-guillemet{height:34px;margin-bottom:14px;font-size:68px;line-height:22px}
  .v-avis-carte--filme blockquote p{font-size:17px;line-height:1.55}
}


/* ---------- 10 · LE HAUT DE L'ACCUEIL — la tranchée en contre-plongée, élargie (17/10/2026, Andrea : « mets-la » ;
   images-ia/vague5/88 élargie vers la gauche par le studio, 4944 × 2304, en WebP 3200 × 1491). En plein cadre, le texte posé
   dessus, sous le voile habituel du haut de page (style.css § 3) : pas d'aplat, pas d'agrandissement (agrandie, la 88
   paraissait floue). Le studio a élargi la photo vers la gauche : calée à droite (100 % 50 %), la pelle tombe d'elle-même à
   droite du titre, de 1024 à 1920 px ; au téléphone, même calage (réglages du studio). Rien ne bouge (le zoom d'entrée de
   style.css reste).
   Retour arrière vers « ras du sol » (accueil.ts, hero.image) : .v-hero{--v-hero-zoom:1.3;--v-hero-y:46%} et, dès 1024 px,
   .v-hero .hero-img img{width:calc(100% * var(--v-hero-zoom));max-width:none;object-position:0 var(--v-hero-y)} ; zoom 1,28
   dès 1280, 1,24 dès 1440, 1,32 dès 1680 ; sous 1024 px, 55 % 50 %. ---------- */
.v-hero .hero-img img{object-position:100% 50%}


/* ---------- 11 · LA PAGE « NOS AVIS » (/avis-clients/, 18/10/2026, Andrea : « Fais une page "Nos avis" également ») ;
   balisage : gabarits/avis-clients.astro, textes : data/avis.ts. Les cartes, les étoiles et la note sont celles du § 9 ; les
   composants, ceux de pages.css (en-tête de page, texte + image, vidéo des fiches). Aucune couleur, police ni effet nouveau ;
   rien ne bouge au survol sauf les liens et les boutons (leurs effets à eux) ; rien n'est lié au défilement.
   · L'en-tête : le titre et le chapô à gauche ; à droite une carte (celle des avis) : la note, la répartition des notes de
     la fiche (des barres à l'encre sur le crème, la part de chaque note : transform, jamais width), le lien de la fiche.
   · Le témoignage filmé : texte + image (pg-duo--portrait), l'image est la vidéo des fiches (pg-video) au format 4:5 de sa
     miniature ; deux colonnes dès 768 px (le texte est long), l'une sous l'autre au téléphone.
   · Les avis Google : une grille de trois colonnes (deux en tablette, une au téléphone) ; les cartes d'une rangée à la même
     hauteur, la signature au pied ; la dernière case, en noir : « Vous avez loué chez nous ? » (huit avis + elle = trois
     rangées pleines ; en tablette, elle prend toute la largeur). ---------- */
.v-avis-entete-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,380px);align-items:center;gap:36px clamp(40px,5vw,96px)}
.v-avis-entete-txt .pg-chapo{margin-top:22px;max-width:52ch}
.v-avis-bilan{display:grid;align-content:start;gap:20px;padding:26px 28px 22px;background:var(--blanc);border:1px solid var(--bord);
  border-radius:var(--r);box-shadow:var(--ombre-repos)}
.v-avis-bilan .v-avis-note{margin-bottom:0}
.v-avis-repartition{display:grid;gap:9px;margin:0;padding:18px 0 0;border-top:1px solid var(--bord);list-style:none}
.v-avis-repartition li{display:grid;grid-template-columns:32px minmax(0,1fr) 3ch;align-items:center;gap:12px;
  font:600 var(--t-petit)/1 var(--f-corps);color:var(--encre);font-variant-numeric:tabular-nums}
.v-avis-rep-lab{display:inline-flex;align-items:center;gap:4px}
.v-avis-etoile{display:block;flex:none;width:13px;height:13px;color:var(--rouge)}
.v-avis-rep-barre{position:relative;display:block;height:8px;border-radius:2px;background:var(--creme);overflow:hidden}
.v-avis-rep-barre > span{position:absolute;inset:0;border-radius:2px;background:var(--encre);transform:scaleX(var(--part));transform-origin:left center}
.v-avis-rep-nb{text-align:right;color:var(--muted)}
.v-avis-bilan > .lien-fleche{justify-self:start;font-size:var(--t-petit)}

/* le témoignage filmé */
.pg-duo.v-avis-filme{align-items:center}
.v-avis-filme .v-avis-video{aspect-ratio:4/5}
.v-avis-video img{object-position:50% 30%}
.v-avis-citation{margin:26px 0 0}
.v-avis-citation blockquote{margin:0}
.v-avis-citation blockquote p{max-width:40em;font:500 clamp(19px,.5vw + 14px,22px)/1.5 var(--f-titre);letter-spacing:-.006em;color:var(--encre);text-wrap:pretty}
.v-avis-citation figcaption{display:flex;flex-direction:column;gap:3px;margin-top:24px;padding-top:16px;border-top:1px solid var(--bord)}

/* les avis Google */
.v-avis-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0;list-style:none}
.v-avis-case{display:flex;min-width:0}
.v-avis-case .v-avis-carte figcaption{margin-top:auto}
.v-avis-laisser{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1 1 auto;min-width:0;
  padding:28px 30px;background:var(--noir);border-radius:var(--r);color:#fff}
.v-avis-laisser-t{font:800 var(--t-bloc)/1.2 var(--f-titre);letter-spacing:-.012em;color:#fff;text-wrap:balance}
.v-avis-laisser-p{margin-top:10px;font:400 var(--t-texte)/1.5 var(--f-corps);color:var(--sur-noir-2)}
.v-avis-laisser .btn{margin-top:24px}

/* « Voir tous les avis », sous les cartes de la section (§ 9) */
.v-avis-plus{margin-top:40px}

@media (max-width:1180px){
  .v-avis-bilan{padding:24px 24px 20px}
  .v-avis-laisser{padding:24px}
}
/* tablette : l'en-tête en colonne, la carte de la note en deux (la note, la répartition) ; le témoignage reste en deux
   colonnes ; les avis en deux colonnes, « Vous avez loué chez nous ? » sur toute la largeur */
@media (max-width:1023px){
  .v-avis-entete-in{grid-template-columns:minmax(0,1fr);align-items:start;gap:28px}
  .v-avis-bilan{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:32px;max-width:600px}
  .v-avis-repartition{grid-column:2;grid-row:1/3;padding:0 0 0 32px;border-top:0;border-left:1px solid var(--bord)}
  .v-avis-bilan .v-avis-note{grid-column:1;grid-row:1;align-self:end}
  .v-avis-bilan > .lien-fleche{grid-column:1;grid-row:2;align-self:start}
  .v-avis-grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .v-avis-case--laisser{grid-column:1/-1}
  .v-avis-case .v-avis-carte figcaption{margin-top:auto}
  .v-avis-laisser{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:32px}
  .v-avis-laisser-t,.v-avis-laisser-p{grid-column:1}
  .v-avis-laisser .btn{grid-column:2;grid-row:1/3;margin-top:0}
}
@media (min-width:768px) and (max-width:1023px){
  .pg-duo.v-avis-filme{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px}
  .v-avis-citation blockquote p{font-size:18px}
}
/* téléphone : tout l'un sous l'autre */
@media (max-width:767px){
  .v-avis-bilan{grid-template-columns:minmax(0,1fr);max-width:none}
  .v-avis-repartition{grid-column:1;grid-row:auto;padding:16px 0 0;border-left:0;border-top:1px solid var(--bord)}
  .v-avis-bilan .v-avis-note,.v-avis-bilan > .lien-fleche{grid-column:1;grid-row:auto}
  .v-avis-filme .v-avis-video{width:100%;max-width:420px}
  .v-avis-citation blockquote p{font-size:17px;line-height:1.55}
  .v-avis-grille{grid-template-columns:minmax(0,1fr);gap:16px}
  .v-avis-laisser{display:flex;align-items:flex-start;padding:24px 22px}
  .v-avis-laisser .btn{margin-top:20px}
  .v-avis-plus{margin-top:28px}
}