/*
Theme Name: Alain Maigre Photographe
Description: Thème bloc sur mesure du site d'Alain Maigre, photographe. Toutes les pages sont faites de blocs natifs, modifiables dans l'éditeur.
Version: 1.0.15
Requires at least: 6.9
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alain-maigre
Tags: block-theme, full-site-editing, portfolio, photography
*/

/* ==========================================================================
   Alain Maigre Photographe — feuille de style du thème
   Écrite pour le balisage des blocs WordPress (groupes, images, listes…).
   Couleurs prélevées sur la référence : noir #070707, cartes #111111,
   orange #FD590B. Deux familles : Archivo (étroite, grasse, en capitales)
   et JetBrains Mono.
   Les images sont toujours ciblées par « .wp-block-image.classe img » : il faut
   être plus précis que les styles par défaut de WordPress pour les dépasser.
   ========================================================================== */

:root{
  --noir:#070707;
  /* Aplats des cartes : un voile clair transparent plutôt qu'un gris plein, pour que la trame de fond reste visible au travers (même teinte que l'ancien #111 sur le fond noir). */
  --carte:rgba(255,255,255,.04);
  --carte-plein:#111111; /* pied de page : sa découpe autour du bouton doit être opaque */
  --trait:#1c1c1c;
  --trait-clair:#2b2b2b;
  --fantome:#151515;
  --blanc:#ffffff;
  --gris:#8b8b8b;
  --gris-sombre:#7d7d7d;
  --orange:#fd590b;
  --orange-fond:#c84a0a; /* orange des fonds sous texte blanc (contraste AA) */

  --marge:40px;
  --vh:1vh;
  /* Respiration entre les sections : 150 px sur grand écran, resserrée sur
     les fenêtres peu hautes (ordinateurs portables). */
  --espace:clamp(64px, min(10.4vw, calc(var(--vh) * 15)), 150px);
  --titre:'Archivo', 'Arial Narrow', sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:70px}
body{
  margin:0;background:var(--noir);color:var(--gris);
  font-family:var(--mono);font-size:12px;line-height:1.7;letter-spacing:.06em;text-transform:uppercase;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Filigrane de fond : de grands arcs très fins, de la même famille que ceux du
   bandeau de l'accueil, tracés derrière tout le contenu (les blocs qui ont
   leur propre fond les recouvrent). Le dessin se répète sans raccord visible
   dans la hauteur. Il est fixe à l'écran ; quand le navigateur le permet, il
   glisse à un tiers de la vitesse du défilement, ce qui donne de la
   profondeur sans script. Hauteur et course sont calculées pour qu'il couvre
   toujours l'écran sans dépasser le bas de la page : pour une vitesse v,
   hauteur = v × page + (1 − v) × écran, course = (1 − v) / v × (hauteur − écran).
   Pas de glissement si le visiteur a demandé moins d'animations, ni dans
   Firefox (qui ne sait pas encore lier une animation au défilement).
   Mesuré en ligne sur la 1.0.7 : le glissement fonctionnait, mais à un sixième
   de la vitesse et avec des traits à 6-14 % il passait pour immobile. */
body::before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:var(--trame,1);background-repeat:repeat-y;background-position:50% 0;background-size:max(100%,1000px) auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='2200' viewBox='0 0 1600 2200' fill='none' stroke='%23fff'%3E%3Ccircle cx='140' cy='120' r='560' stroke-opacity='.22' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='140' cy='2320' r='560' stroke-opacity='.22' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='1380' cy='900' r='620' stroke-opacity='.16' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='380' cy='1750' r='520' stroke-opacity='.2' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='380' cy='-450' r='520' stroke-opacity='.2' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='900' cy='1150' r='1050' stroke-opacity='.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body{position:relative}
    body::before{position:absolute;inset:0 0 auto;height:calc(100% / 3 + 66.6svh);animation:trame-glisse linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes trame-glisse{to{transform:translateY(calc((100% - 100svh) * 2))}}

/* Second filigrane, plus proche : d'autres arcs qui glissent aux deux tiers de la
   vitesse du défilement (le premier à un tiers : deux plans, donc de la
   profondeur) et qui apparaissent puis s'effacent au fil de la page : deux
   animations sur le même défilement, l'une pour la position (une seule course
   sur toute la page), l'autre pour la transparence (cinq demi-respirations,
   quelle que soit la longueur de la page ; elle finit nette, au pied de page).
   Même calcul de hauteur et de course que le premier, pour une vitesse de deux tiers. */
body::after{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;opacity:calc(.6 * var(--trame,1));background-repeat:repeat-y;background-position:50% 0;background-size:max(100%,1000px) auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='1800' viewBox='0 0 1600 1800' fill='none' stroke='%23fff'%3E%3Ccircle cx='1250' cy='260' r='380' stroke-opacity='.24' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='1250' cy='2060' r='380' stroke-opacity='.24' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='1250' cy='260' r='300' stroke-opacity='.12' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='1250' cy='2060' r='300' stroke-opacity='.12' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='260' cy='1180' r='460' stroke-opacity='.2' vector-effect='non-scaling-stroke'/%3E%3Ccircle cx='260' cy='1180' r='540' stroke-opacity='.1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    body::after{position:absolute;inset:0 0 auto;height:calc(200% / 3 + 33.3svh);
      animation:trame-avance linear both,trame-respire ease-in-out 5 alternate both;
      animation-timeline:scroll(root block),scroll(root block)}
  }
}
@keyframes trame-avance{to{transform:translateY(calc((100% - 100svh) * .5))}}
/* --trame : intensité des deux filigranes (1 = normal ; réglable par l'extension Espace client). */

/* Parallaxe des grandes photos, sur toutes les pages : la photo glisse un peu
   dans son cadre pendant que la page défile (le cadre, lui, ne bouge pas).
   Dosage en un seul endroit : --parallaxe = course de la photo de part et
   d'autre du centre ; --parallaxe-marge = agrandissement qui évite tout bord
   vide (au moins 1 + 2 × la course). Les textes ne bougent jamais. */
:root{--parallaxe:6%;--parallaxe-marge:1.14}
.bande-photos .wp-block-image{overflow:hidden}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Le cadre (qui masque ce qui dépasse) porte la chronologie : un cadre en « overflow:hidden »
       est lui-même un conteneur de défilement, une chronologie view() posée sur la photo ne bougerait pas. */
    .page-tete .wp-block-image.page-tete-photo,
    .duo .wp-block-image.duo-vue,
    .projet .wp-block-image.projet-vue,
    .ville-carte .wp-block-image.ville-vue,
    .bande-photos .wp-block-image{view-timeline-name:--cadre}
    .page-tete .wp-block-image.page-tete-photo img,
    .duo .wp-block-image.duo-vue img,
    .projet .wp-block-image.projet-vue img,
    .ville-carte .wp-block-image.ville-vue img,
    .bande-photos .wp-block-image img{scale:var(--parallaxe-marge);animation:photo-glisse linear both;animation-timeline:--cadre}
    /* bandeau du haut des pages : il est déjà à l'écran au chargement, il glisse sur la première hauteur d'écran */
    .page-tete .wp-block-image.page-tete-photo img{animation-name:photo-descend;animation-timeline:scroll(root);animation-range:0 100vh}
  }
}
@keyframes photo-glisse{from{translate:0 calc(var(--parallaxe) * -1)}to{translate:0 var(--parallaxe)}}
@keyframes photo-descend{from{translate:0 0;scale:var(--parallaxe-marge)}to{translate:0 calc(var(--parallaxe) * 2);scale:calc(var(--parallaxe-marge) * var(--plongee))}}
@media (max-width:760px){:root{--parallaxe:4%;--parallaxe-marge:1.1}}

/* Navigation pilotée par le défilement, en douceur, sur toutes les pages.
   Bonnes pratiques retenues (Chrome for Developers, MDN, NN/g) : le défilement
   n'est jamais détourné ni aimanté (pas de « scrolljacking ») ; il ne fait que
   piloter, au rythme du visiteur, des effets courts, en transform/opacité
   seulement ; un texte n'est jamais en mouvement pendant qu'on le lit.
   Trois scénarios :
   1 · chaque section prend le relais de la précédente : elle arrive d'un peu plus
       bas et s'éclaircit pendant qu'elle entre dans le bas de l'écran, puis se
       tient immobile pour la lecture ;
   2 · en quittant le haut de page, on « plonge » dans la photo du bandeau
       (zoom avant) pendant que son titre s'efface ;
   3 · les grandes photos s'ouvrent en entrant (le cadre part d'un peu plus
       étroit), tout en gardant leur glissement dans le cadre.
   Dosage, trois niveaux (réglage actuel : MOYEN, choisi le 18 octobre 2026) :
                        léger      moyen      marqué
     --passage          32 px      64 px      96 px    distance d'arrivée des sections
     --plongee          1,10       1,22       1,35     zoom dans la photo des bandeaux intérieurs
     --plongee-accueil  1,05       1,12       1,20     zoom dans le diaporama de l'accueil
     --ouverture        4 %        10 %       16 %     rognage de départ des photos
   Sur téléphone, passage et ouverture sont réduits d'environ un tiers. */
:root{--passage:64px;--plongee:1.22;--plongee-accueil:1.12;--ouverture:10%}
@media (max-width:760px){:root{--passage:40px;--ouverture:6%}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* 1 · Sections : sur la première moitié d'écran de leur arrivée. */
    /* Seulement les grands blocs de mise en page : les paragraphes d'un article ne bougent pas. */
    :is(.wp-block-post-content,.entry-content) > .wp-block-group:not(:first-child){
      animation:section-arrive linear both;animation-timeline:view();animation-range:entry 0% entry 50vh}
    /* 2 · Bandeau du haut (accueil et pages intérieures) : sur la première hauteur d'écran. */
    .hero-diapos{animation:plongee linear both;animation-timeline:scroll(root);animation-range:0 100vh}
    /* Accueil : la ligne du haut (repères, accroche) s'efface d'abord, le grand titre ensuite et
       plus lentement, sur une courbe douce : un fondu en deux plans, sans à-coup. */
    .page-tete-bas{animation:titre-s-efface linear both;animation-timeline:scroll(root);animation-range:0 70vh}
    .hero-bas > :not(.hero-nom){animation:titre-s-efface linear both;animation-timeline:scroll(root);animation-range:0 55vh}
    .hero-bas > .hero-nom{animation:titre-fondu linear both;animation-timeline:scroll(root);animation-range:5vh 90vh}
    /* 3 · Photos qui s'ouvrent (dévoilement par masque) : seulement les grandes photos des blocs
       texte-image ; retiré des cartes de galerie et des bandes de photos à sa demande (18 octobre 2026).
       Le cadre porte déjà la chronologie --cadre. */
    .duo .wp-block-image.duo-vue{
      animation:photo-s-ouvre linear both;animation-timeline:--cadre;animation-range:entry 0% cover 45%}
  }
}
@keyframes section-arrive{from{opacity:var(--passage-fondu,.25);translate:0 var(--passage)}to{opacity:1;translate:0 0}}
@keyframes plongee{to{scale:var(--plongee-accueil)}}
@keyframes titre-s-efface{to{opacity:.1;translate:0 calc(var(--passage) * -1)}}
/* Courbe douce (lente au départ, puis franche, puis lente) : le titre reste net un moment, puis se fond. */
@keyframes titre-fondu{0%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.45,0,.55,1)}100%{opacity:.04;translate:0 calc(var(--passage) * -1.5)}}
@keyframes photo-s-ouvre{from{clip-path:inset(var(--ouverture) var(--ouverture))}to{clip-path:inset(0 0)}}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p,h1,h2,h3,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
figure.wp-block-image{margin:0}
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{outline:2px solid var(--orange);outline-offset:3px}
/* Accessibilité : texte lu par les lecteurs d'écran mais invisible à l'écran, et éléments
   masqués par app.js (attribut hidden) même quand une règle leur donne un affichage. */
.visuellement-cache,.screen-reader-text:not(:focus){position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
[hidden]{display:none !important}
/* filet de sécurité contre l'espacement automatique de WordPress (spécificité nulle) */
:where(.wp-block-group)>:where(*),:where(.wp-block-buttons){margin-block:0}

/* Le conteneur sert d'étalon (unités cqw) aux très grands textes. */
.wrap{width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--marge);container-type:inline-size}

/* Titres : grotesque étroite, grasse, capitales */
.titre,.hero-nom,.fantome,.apropos-phrase,.chiffre-n,.service-titre,.projet-nom,.studio-titre,.studio-contact-titre,
.studio-prix strong,.studio-liste,.pied-appel p,.pied-infos h2,.onglet,.dispo,.reference-nom,.avis-google-titre,
.actu-titre,.cookies-titre,.page-tete-titre,.intro-phrase,.prestation h3,.secteur-nom,.autre-nom,.appel-tel,
.coordonnees h2,.coordonnees-tel,.menu-tel,.puces{
  font-family:var(--titre);font-stretch:68%;font-weight:800;text-transform:uppercase;letter-spacing:0;color:var(--blanc);
}
.titre{font-size:clamp(34px,4.5vw,66px);line-height:1.06;text-wrap:balance}
.titre--bloc{margin-bottom:calc(var(--espace) * .42)}

/* Repère de section : libellé à gauche, mot à droite, filet pointillé */
.rep{display:flex;justify-content:space-between;gap:24px;padding-bottom:26px;margin-bottom:clamp(30px,calc(var(--espace) * .37),56px);
  border-bottom:1px dashed var(--trait-clair);font-size:12px;color:var(--gris)}
.rep-nom::before{content:"";display:inline-block;width:2px;height:12px;margin-right:9px;vertical-align:-1px;background:var(--orange)}
.tete{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:calc(var(--espace) * .42)}

/* Bouton */
.wp-block-button .wp-block-button__link.wp-element-button{display:inline-flex;align-items:center;gap:12px;padding:17px 24px;
  font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:15px;line-height:1;letter-spacing:0;text-transform:uppercase;white-space:nowrap;
  color:var(--blanc);background:#0b0b0b;border:1px solid var(--trait-clair);border-radius:0;transition:background .25s,border-color .25s}
.wp-block-button .wp-block-button__link.wp-element-button::after{content:"→";font-family:var(--mono);font-weight:500;color:var(--orange);transition:transform .25s,color .25s}
.wp-block-button .wp-block-button__link.wp-element-button:hover{background:var(--orange-fond);border-color:var(--orange)}
.wp-block-button .wp-block-button__link.wp-element-button:hover::after{color:var(--blanc);transform:translateX(4px)}

/* Mot fantôme en fond de section */
.fantome{font-stretch:100%;font-weight:900;color:var(--fantome);text-align:center;white-space:nowrap;line-height:.74;letter-spacing:-.02em;user-select:none;overflow-x:clip}

/* Réduction automatique des textes trop longs (voir app.js). L'enveloppe ne
   crée pas de boîte : les lignes gardent leur hauteur, seul le texte rétrécit. */
.reduit{display:contents}

/* Texte courant : Archivo en casse et largeur normales, pour les textes longs. */
.texte,.prestation p,.secteur-desc{font-family:var(--titre);font-stretch:100%;font-weight:400;font-size:17px;line-height:1.7;letter-spacing:0;text-transform:none;color:#c4c4c4}
.texte p + p{margin-top:1.1em}
.texte h2{margin:1.9em 0 .6em;font-stretch:68%;font-weight:800;font-size:26px;line-height:1.15;text-transform:uppercase;color:var(--blanc)}
.texte p a{color:var(--blanc);border-bottom:1px solid var(--orange)}
.texte .chapeau{font-size:21px;line-height:1.55;color:var(--blanc)}
.puces{display:grid;gap:10px;margin-top:24px;font-weight:700;font-size:15px;line-height:1.25}
.puces li{position:relative;padding-left:16px}
.puces li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:4px;border-radius:50%;background:var(--orange)}

/* ---------- Cadrage des photos ----------
   Chaque photo remplit un cadre de taille fixe : on peut la remplacer par
   n'importe quelle image sans décaler la mise en page. Ces classes (à poser
   sur le bloc Image) choisissent la zone qui reste visible. */
.wp-block-image.cadre-haut img{object-position:50% 15%}
.wp-block-image.cadre-bas img{object-position:50% 85%}
.wp-block-image.cadre-gauche img{object-position:12% 50%}
.wp-block-image.cadre-droite img{object-position:88% 50%}
.wp-block-image.cadre-haut-droite img{object-position:92% 0}

/* Icônes des réseaux sociaux : le lien porte son nom en texte (lu par les
   lecteurs d'écran), l'icône est choisie d'après l'adresse du lien. */
.reseaux{display:flex;gap:8px}
.reseaux a{display:block;width:38px;height:38px;overflow:hidden;font-size:0;border:1px solid rgba(255,255,255,.22);
  background:center / 17px no-repeat;transition:background-color .2s,border-color .2s,width .3s,height .3s}
.reseaux a:hover{background-color:var(--orange-fond);border-color:var(--orange)}
.reseaux a[href*="facebook"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M13.5 21v-7.5h2.6l.4-3h-3V8.6c0-.9.3-1.5 1.6-1.5h1.5V4.4c-.3 0-1.2-.1-2.2-.1-2.2 0-3.7 1.3-3.7 3.800v2.400H8.200v3h2.500V21z'/%3E%3C/svg%3E")}
.reseaux a[href*="instagram"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.700'%3E%3Crect x='3.800' y='3.800' width='16.400' height='16.400' rx='4.500'/%3E%3Ccircle cx='12' cy='12' r='3.900'/%3E%3Ccircle cx='17' cy='7' r='.600' fill='%23fff'/%3E%3C/svg%3E")}
.reseaux a[href*="linkedin"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 9h3.200v11H4zM5.600 4a1.900 1.900 0 1 1 0 3.800 1.900 1.900 0 0 1 0-3.800zM9.400 9h3.100v1.500c.4-.8 1.500-1.700 3.200-1.700 3.400 0 4 2.200 4 5.100V20h-3.200v-5.400c0-1.300 0-2.900-1.800-2.900s-2 1.400-2 2.800V20H9.400z'/%3E%3C/svg%3E")}

/* ---------- En-tête fixe ----------
   Bandeau sombre translucide qui reste en haut de l'écran et s'amincit, logo
   compris, dès qu'on quitte le haut de la page (classe « est-compact »). */
.entete{position:fixed;inset:0 0 auto 0;z-index:60;border-bottom:1px solid rgba(255,255,255,.1)}
.entete::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,7,7,.72) 0,rgba(7,7,7,.4) 100%);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1);transition:background .3s}
.entete.est-compact::before{background:rgba(7,7,7,.76)}
.admin-bar .entete{top:32px}
.nav{display:flex;align-items:center;gap:8px;padding-block:12px;font-size:12px;color:var(--blanc);transition:padding .3s}
.entete.est-compact .nav{padding-block:7px}
.nav-marque{margin-right:auto}
/* Le logo d'Alain (version claire) est passé en blanc pur pour s'accorder aux textes. */
.nav .wp-block-site-logo img{width:128px;height:auto;filter:brightness(0) invert(1);transition:width .3s}
.entete.est-compact .wp-block-site-logo img{width:92px}
.entete.est-compact .reseaux a{width:34px;height:34px}
/* Bouton du menu : deux traits, qui deviennent une croix à l'ouverture. */
.nav-bascule{display:flex;align-items:center;gap:12px;height:38px;padding:0 16px;border:1px solid rgba(255,255,255,.22);
  font-size:11px;font-weight:500;cursor:pointer;user-select:none;transition:background .2s,border-color .2s,height .3s}
/* Fond orange foncé (--orange-fond) sous un texte blanc : 4,7:1 de contraste, contre 3,2:1 avec l'orange vif. */
.nav-bascule:hover{background:var(--orange-fond);border-color:var(--orange)}
.entete.est-compact .nav-bascule{height:34px}
/* « Menu » devient « Fermer » à l'ouverture : c'est app.js qui change le texte, pour qu'il soit aussi lu. */
.nav-bascule::before{content:"";width:20px;height:8px;
  background:linear-gradient(currentColor,currentColor) 0 0 / 100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100% / 100% 1.5px no-repeat}
.menu-ouvert .nav-bascule::before{width:14px;height:14px;
  background:linear-gradient(45deg,transparent calc(50% - .8px),currentColor calc(50% - .8px),currentColor calc(50% + .8px),transparent calc(50% + .8px)),
             linear-gradient(-45deg,transparent calc(50% - .8px),currentColor calc(50% - .8px),currentColor calc(50% + .8px),transparent calc(50% + .8px))}

/* ---------- Menu plein écran ----------
   Ouvert par le bouton de l'en-tête (classe « menu-ouvert » sur <html>).
   C'est une simple liste : les sous-menus sont des listes imbriquées. */
.menu-ouvert{overflow:hidden}
.menu{position:fixed;inset:0;z-index:50;overflow-y:auto;background:rgba(7,7,7,.97);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.menu-ouvert .menu{opacity:1;visibility:visible}
.menu-interieur{min-height:100%;display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;padding-block:120px 48px}
.menu-liens{display:flex;flex-direction:column;gap:clamp(2px,calc(var(--vh) * 1.2),14px);counter-reset:menu}
.menu-liens > li{counter-increment:menu;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 34px;opacity:0;transform:translateY(14px);
  transition:opacity .4s,transform .5s cubic-bezier(.22,.8,.2,1)}
.menu-ouvert .menu-liens > li{opacity:1;transform:none}
.menu-ouvert .menu-liens > li:nth-child(2){transition-delay:.05s}
.menu-ouvert .menu-liens > li:nth-child(3){transition-delay:.1s}
.menu-ouvert .menu-liens > li:nth-child(4){transition-delay:.15s}
.menu-ouvert .menu-liens > li:nth-child(5){transition-delay:.2s}
.menu-ouvert .menu-liens > li:nth-child(6){transition-delay:.25s}
.menu-liens > li > a{display:flex;align-items:baseline;gap:18px;font-family:var(--titre);font-stretch:68%;font-weight:800;color:var(--blanc);
  font-size:clamp(34px,min(6vw,calc(var(--vh) * 9.5)),84px);line-height:1.02;letter-spacing:0;transition:color .2s}
.menu-liens > li > a::before{content:counter(menu,decimal-leading-zero);font-family:var(--mono);font-stretch:100%;font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--orange)}
.menu-liens > li > a:hover,.menu-liens > li > a.est-courant{color:var(--orange)}
.menu-liens ul{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:12px;color:var(--gris)}
.menu-liens ul a{display:block;padding-block:4px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.menu-liens ul a:hover{color:var(--blanc);border-color:var(--orange)}
.menu-cote{display:flex;flex-direction:column;align-items:flex-end;gap:22px;text-align:right}
.menu-tel{font-size:26px;line-height:1;letter-spacing:.01em}
.menu-tel a{transition:color .2s}
.menu-tel a:hover{color:var(--orange)}

/* ---------- Ouverture (bandeau du haut de l'accueil) ----------
   Hauteur : tout l'écran. Plancher de 640 px pour les fenêtres peu hautes des
   portables ; plafond de 1400 px pour les grands écrans de bureau. */
.hero{position:relative;height:100svh;min-height:min(640px,100svh);max-height:1400px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:var(--blanc)}

/* Défilement : les images sont empilées, seule « est-actif » est visible (la
   première tant que le script n'a pas démarré). Chaque photo se fond dans le
   noir vers le bas, pour que le nom blanc reste lisible. */
.hero-diapos{position:absolute;inset:0;background:var(--noir)}
.hero-diapos .wp-block-image.hero-photo{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.2) 85%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 42%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.2) 85%,transparent 100%)}
.hero-diapos .wp-block-image.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-diapos .hero-photo.est-actif,.hero-diapos:not(.est-pret) .hero-photo:first-child{opacity:1}

/* Zoom lent sur chaque photo : avant pour les photos impaires, arrière pour les
   paires. Réglé pour ne gêner personne : 5 % d'amplitude seulement, vitesse
   constante, aucun déplacement latéral, arrêt avec le bouton « Pause », et
   pas de zoom du tout chez les visiteurs qui ont demandé à leur appareil de
   réduire les animations (il leur reste le fondu). Durée = temps d'affichage
   (DUREE dans app.js) + fondu : la photo qui s'efface (« est-sortant »)
   continue son mouvement au lieu de se figer. */
@keyframes zoom-avant{from{scale:1}to{scale:1.05}}
@keyframes zoom-arriere{from{scale:1.05}to{scale:1}}
@media (prefers-reduced-motion:no-preference){
  .hero-diapos .hero-photo.est-actif,.hero-diapos .hero-photo.est-sortant{animation:zoom-avant 5.7s linear both}
  .hero-diapos .hero-photo:nth-child(even).est-actif,.hero-diapos .hero-photo:nth-child(even).est-sortant{animation-name:zoom-arriere}
  .hero-diapos.est-en-pause .hero-photo{animation-play-state:paused}
}

/* « cadre-releve » : photo dont le sujet est tout en bas (les spectateurs du
   festival). Elle s'arrête au sommet des lettres du nom au lieu de passer
   derrière. 26 px = marge sous le nom ; 11,2 vw = hauteur de ses capitales.
   Le zoom part du bas, pour que ce bord ne bouge pas. */
.hero-diapos .wp-block-image.hero-photo.cadre-releve{bottom:auto;height:calc(100% - 26px - 11.2vw);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 82%,rgba(0,0,0,.86) 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 82%,rgba(0,0,0,.86) 100%)}
.hero-diapos .wp-block-image.cadre-releve img{object-position:50% 100%}

/* « cadre-entier » : photo verticale dans le bandeau horizontal. Elle est
   montrée presque entière, centrée sur le noir, bords gauche et droit fondus
   (écrans plus larges que hauts seulement). */
@media (min-aspect-ratio:1/1){
  .hero-diapos .wp-block-image.hero-photo.cadre-entier{inset:auto;left:50%;top:5%;height:113%;width:auto;transform:translateX(-50%);transform-origin:0 50%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),
                       linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.2) 71%,transparent 84%);
            mask-image:linear-gradient(90deg,transparent 0,#000 15%,#000 85%,transparent 100%),
                       linear-gradient(180deg,#000 0,#000 34%,rgba(0,0,0,.62) 52%,rgba(0,0,0,.2) 71%,transparent 84%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .hero-diapos .wp-block-image.cadre-entier img{width:auto;height:100%;max-width:none;object-fit:contain}
}

/* trois arcs fins, tracés en dégradés (aucun bloc vide dans la page) */
.hero-diapos::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 9vw -5vw,transparent calc(31vw - 1px),rgba(255,255,255,.27) calc(31vw - 1px),rgba(255,255,255,.27) 31vw,transparent 31vw),
  radial-gradient(circle at 77vw 23vw,transparent calc(35vw - 1px),rgba(255,255,255,.27) calc(35vw - 1px),rgba(255,255,255,.27) 35vw,transparent 35vw),
  radial-gradient(circle at 20vw 58vw,transparent calc(28vw - 1px),rgba(255,255,255,.14) calc(28vw - 1px),rgba(255,255,255,.14) 28vw,transparent 28vw)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(7,7,7,.14) 0,rgba(7,7,7,0) 22%)}

.hero-bas{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;align-items:end;row-gap:22px;padding-bottom:26px;font-size:13px}
/* ombre douce : les petits textes restent lisibles sur une photo claire */
.hero-gauche,.hero-accroche{text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.5)}
.hero-gauche{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.hero-defile{display:flex;align-items:center;gap:22px;font-size:12px}
/* Repères : le numéro vient d'un compteur, le libellé n'apparaît que pour l'image affichée. */
.hero-reperes{display:flex;align-items:center;gap:4px;counter-reset:repere}
.hero-reperes li{counter-increment:repere;display:flex;align-items:center;gap:10px;padding:4px 7px;font-size:0;color:var(--blanc);cursor:pointer}
.hero-reperes li::before{content:counter(repere,decimal-leading-zero);font-size:12px;font-weight:500;color:rgba(255,255,255,.55);transition:color .3s}
.hero-reperes li:hover::before{color:var(--blanc)}
.hero-reperes li.est-actif{font-size:12px;padding-right:14px}
.hero-reperes li.est-actif::before{color:var(--orange);font-weight:700}
.hero-pause{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.3);color:rgba(255,255,255,.7);font-size:11px;cursor:pointer;user-select:none;transition:color .2s,border-color .2s}
.hero-pause:hover{color:var(--blanc);border-color:var(--orange)}
.hero-contact a{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .2s}
.hero-contact a::after{content:" →"}
.hero-contact a:hover{border-color:var(--orange)}
.hero-accroche{text-align:right;line-height:1.75}
/* « Alain Maigre » occupe la largeur du contenu, moins le mot vertical « Photo »
   (en italique dans l'éditeur) posé tout à droite, calé sur la hauteur des
   capitales. Rapports mesurés sur la police : capitale 0,69 cadratin ;
   « ALAIN MAIGRE » 5,744 ; « PHOTO » 2,792. */
.hero-nom{grid-column:1 / -1;display:grid;grid-template-columns:1fr auto;column-gap:.05em;align-items:start;
  font-stretch:70%;font-weight:900;font-size:min(16.75cqw,36svh);line-height:.8;letter-spacing:-.025em;word-spacing:.09em;white-space:nowrap}
.hero-nom em{font-style:normal;font-size:.2471em;line-height:.69;letter-spacing:0;word-spacing:0;margin-top:.182em;writing-mode:vertical-rl;transform:rotate(180deg)}

/* ---------- À propos ---------- */
.apropos{padding-top:var(--espace)}
/* Le portrait et la colonne de texte partagent la même ligne : ils démarrent
   et finissent à la même hauteur ; c'est le texte qui donne la hauteur. */
.apropos-grille{display:grid;grid-template-columns:42.7fr 57.3fr;column-gap:20px}
.apropos-grille .wp-block-image.apropos-portrait{position:relative;min-height:380px;background:#fff;overflow:hidden}
.apropos-grille .wp-block-image.apropos-portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.apropos-droite{display:flex;flex-direction:column;gap:clamp(26px,calc(var(--espace) * .34),44px)}
/* décalage : aligne le haut des capitales sur le haut du portrait */
.apropos-phrase{position:relative;top:-.3em;font-size:clamp(24px,2.65vw,39px);line-height:1.28;max-width:21em}
.apropos-conf strong{font-weight:700;color:var(--blanc)}
.apropos-droite .chiffres{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:auto}
.chiffre{position:relative;min-height:clamp(180px,calc(var(--vh) * 29),262px);padding:24px;background:var(--carte);
  display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-content:end;align-items:baseline}
.chiffre::before{content:"+";position:absolute;left:22px;top:12px;color:var(--orange);font-size:26px;line-height:1;font-family:var(--mono);font-weight:400}
.chiffre-n{font-size:82px;line-height:.82}
.chiffre--plus .chiffre-n::before{content:"+";margin-right:6px;font-family:var(--mono);font-stretch:100%;font-weight:400;font-size:16px;color:var(--gris-sombre);vertical-align:top}
.chiffre-l{font-size:12px;color:var(--gris)}

/* ---------- Services (accueil) ----------
   Une carte ouverte à la fois. Fermée : la photo remplit la carte et le titre
   est vertical. Ouverte : photo encadrée, titre horizontal, texte et mots-clés. */
.services{padding-top:var(--espace)}
.services-rangee{display:flex;gap:20px;height:clamp(430px,calc(var(--vh) * 64),572px);counter-reset:service}
.service{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--carte);cursor:pointer;counter-increment:service;
  transition:flex-grow .55s cubic-bezier(.22,.8,.2,1)}
/* Haut de carte : le numéro, et un filet sur la carte ouverte. L'ancien petit
   libellé « Services » n'est plus affiché, même s'il reste dans une page. */
.service-tete{display:none}
.service::before{content:"";position:absolute;z-index:2;left:16px;right:59px;top:31px;height:1px}
.service::after{content:"(" counter(service,decimal-leading-zero) ")";position:absolute;z-index:2;right:16px;top:22px;font-size:11px;color:var(--orange)}
.service .wp-block-image.service-image{position:absolute;inset:0}
.service .wp-block-image.service-image img{width:100%;height:100%;object-fit:cover}
.service .wp-block-image.service-image::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,7,7,.5) 0,rgba(7,7,7,0) 26%,rgba(7,7,7,.1) 55%,rgba(7,7,7,.62) 100%)}
.service-titre{position:absolute;z-index:2;left:22px;bottom:24px;writing-mode:vertical-rl;transform:rotate(180deg);font-size:25px;line-height:1;white-space:nowrap}
.service-corps{display:none}
.service-texte{max-width:44ch;min-height:3.4em}
.service-tags{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
.service-tags li,.reference-tags li{padding:9px 6px;border:1px dashed var(--trait-clair);font-size:10px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service.est-actif{flex-grow:2.5;cursor:default;display:flex;flex-direction:column;padding:66px 14px 14px}
.service.est-actif::before{background:var(--trait-clair)}
.service.est-actif .wp-block-image.service-image{position:relative;inset:auto;flex:1;min-height:0;min-width:400px;overflow:hidden;animation:apparait .5s .15s both}
.service.est-actif .wp-block-image.service-image::after{content:none}
.service.est-actif .service-titre{position:static;writing-mode:horizontal-tb;transform:none;margin-top:26px;font-size:30px;line-height:1.1;min-width:400px;animation:apparait .5s .2s both}
.service.est-actif .service-corps{display:block;margin-top:12px;min-width:400px;animation:apparait .5s .25s both}
@keyframes apparait{from{opacity:0}to{opacity:1}}

/* ---------- Galerie (accueil) ---------- */
.galerie{padding-top:var(--espace)}
.galerie .fantome{font-size:20.9cqw;margin-bottom:-.115em}
.projets{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:1100px){.projets{grid-template-columns:1fr 1fr}}
.projet{position:relative;padding:12px 12px 20px;background:var(--carte);border:1px solid var(--trait)}
.projet .wp-block-image.projet-vue{position:relative;overflow:hidden;aspect-ratio:646 / 500;background:#000}
.projet .wp-block-image.projet-vue a{display:block;height:100%}
.projet .wp-block-image.projet-vue img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.2,1),filter .5s}
.projet-nom{font-size:28px;line-height:1.1;margin-top:26px}
.projet-legende{margin-top:8px}
/* Au survol : la photo recule et s'assombrit, une pastille invite à entrer. */
.projet-vue::after{content:"Voir la galerie";position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);padding:9px 14px;pointer-events:none;
  background:var(--noir);font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:12px;line-height:1;letter-spacing:0;white-space:nowrap;color:var(--blanc);
  opacity:0;transition:opacity .3s .1s}
.projet:hover .projet-vue img{transform:scale(1.08);filter:brightness(.6)}
.projet:hover .projet-vue::after{opacity:1}

/* ---------- Studio mobile (bande plus claire) ---------- */
.bande{margin-top:var(--espace);padding-block:calc(var(--espace) * .93) var(--espace);background:var(--carte)}
.studio{display:grid;grid-template-columns:2.06fr 1fr;gap:20px}
.studio-offre,.studio-contact{background:var(--carte);border:1px solid var(--trait)}
.studio-offre{padding-bottom:12px}
.studio-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:30px;border-bottom:1px solid var(--trait)}
.studio-titre,.studio-contact-titre{font-size:26px;line-height:1.1}
.studio-texte{margin-top:12px}
.onglets{display:flex;padding:5px;background:var(--carte);border:1px solid var(--trait)}
.onglet{padding:12px 20px;font-size:13px;line-height:1;color:var(--gris);cursor:pointer;user-select:none;transition:background .2s,color .2s}
.onglet.est-actif{background:var(--noir);color:var(--blanc)}
.studio-corps{padding:44px 30px 40px}
.studio-liste{display:none;grid-template-columns:1fr 1fr;gap:16px 40px;margin-top:22px;font-size:15px;line-height:1.2;font-weight:700}
.studio-liste.est-actif{display:grid}
.studio-liste li{position:relative;padding-left:16px}
.studio-liste li::before{content:"";position:absolute;left:0;top:.42em;width:4px;height:4px;border-radius:50%;background:var(--blanc)}
.studio-pied{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 12px;padding:26px 30px;border:1px solid var(--trait);background:rgba(0,0,0,.3)}
.studio-prix strong{margin-right:14px;font-size:64px;line-height:.9}
.studio-contact{display:flex;flex-direction:column;align-items:flex-start;padding:30px}
.studio-contact-haut{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:54px}
.studio-contact .wp-block-image.pastille-portrait{flex:none;width:62px;height:62px;border-radius:50%;overflow:hidden;background:#fff}
.studio-contact .wp-block-image.pastille-portrait img{width:100%;height:100%;object-fit:cover}
.dispo{font-size:13px;color:var(--orange);font-weight:700}
.dispo::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:2px}
.studio-contact .wp-block-buttons{margin-top:30px}
.studio-contact .studio-mail{position:relative;width:100%;margin-top:auto;padding:34px 0 0 48px;color:var(--blanc)}
.studio-mail strong{font-size:11px;font-weight:400;color:var(--gris)}
.studio-mail::before{content:"";position:absolute;left:0;bottom:2px;width:34px;height:34px;border-radius:50%;background:var(--carte)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm8 7 6.500-4.500V7.300L12 11.700 5.500 7.300v1.200z'/%3E%3C/svg%3E") center / 16px no-repeat}

/* ---------- Références clients ----------
   Uniquement des faits : le client et le travail réalisé. Aucun avis inventé. */
.references-section{padding-top:var(--espace)}
.references{display:grid;grid-template-columns:1fr 1fr;gap:20px;counter-reset:reference}
.reference{display:flex;flex-direction:column;padding:24px 30px 30px;background:var(--carte);border:1px solid var(--trait);counter-increment:reference}
.reference-tete{display:flex;align-items:center;gap:14px;font-size:11px;color:var(--gris)}
.reference-tete::before{content:"";order:1;flex:1;height:1px;background:var(--trait-clair)}
.reference-tete::after{content:"(" counter(reference,decimal-leading-zero) ")";order:2;color:var(--orange)}
.reference .reference-nom{margin-top:clamp(30px,calc(var(--espace) * .55),70px);font-size:clamp(30px,3.7vw,54px);line-height:1.05}
.reference .reference-type{margin-top:12px;font-weight:700;color:var(--blanc)}
.reference .reference-texte{margin-top:12px;max-width:46ch}
.reference .reference-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.reference-tags li{padding:9px 12px}
/* Logo d'une référence : vignette de taille fixe, le logo y est contenu en entier (carré, horizontal ou vertical) */
.reference .reference-logo{margin:22px 0 0;width:132px;height:80px;display:flex;align-items:center;justify-content:center;padding:12px 16px;background:#fff;border-radius:12px;overflow:hidden}
.reference .reference-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.reference .reference-logo--nu{background:transparent;border:1px solid var(--trait-clair)}
.reference .reference-logo + .reference-nom{margin-top:22px}
/* Bloc avis Google : note réelle relevée sur la fiche. */
.avis-google{flex:none;width:min(360px,100%);padding:20px 22px;background:var(--carte);border:1px solid var(--trait)}
.avis-google-titre{font-size:19px;line-height:1.1}
.avis-google-note::before{content:"★★★★★";margin-right:12px;font-family:var(--titre);font-size:17px;line-height:1;letter-spacing:.14em;color:var(--orange);vertical-align:-1px}
.avis-google .avis-google-note{margin-top:10px}
.avis-google .avis-google-liens{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--trait-clair);font-size:11px;color:var(--blanc)}
.avis-google-liens a{border-bottom:1px solid transparent;transition:border-color .2s}
.avis-google-liens a::after{content:" →";color:var(--orange)}
.avis-google-liens a:hover{border-color:var(--orange)}

/* ---------- Secteurs (accueil) ---------- */
.secteurs{padding-top:var(--espace)}
.villes{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;align-items:start}
.ville-carte{position:relative}
.ville-carte .wp-block-image.ville-vue{position:relative;overflow:hidden;background:#000}
.ville-carte .wp-block-image.ville-vue a{display:block}
.ville-carte .wp-block-image.ville-vue img{width:100%;aspect-ratio:1.06;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.2,1),filter .4s}
.ville-carte:nth-child(2) .wp-block-image.ville-vue img,.ville-carte:nth-child(5) .wp-block-image.ville-vue img{aspect-ratio:.86}
.ville-carte:nth-child(4) .wp-block-image.ville-vue img{aspect-ratio:1.5}
.ville-vue::after{content:"Voir le secteur →";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:8px 12px;white-space:nowrap;pointer-events:none;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--blanc);font-size:11px;opacity:0;transition:opacity .3s}
.ville-carte:hover .ville-vue img{transform:scale(1.06);filter:brightness(.7)}
.ville-carte:hover .ville-vue::after{opacity:1}
.ville-carte .ville-dep{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:11px;color:var(--gris-sombre)}
.ville-dep::after{content:"Studio mobile"}
.ville-carte .ville-nom{margin-top:6px;font-size:13px;color:var(--blanc)}
/* lien étiré : toute la carte est cliquable */
.ville-nom a::before,.secteur-nom a::before,.autre-nom a::before,.actu-titre a::before{content:"";position:absolute;inset:0}

/* ---------- Actualités (liste d'articles) ---------- */
.actus{padding-block:var(--espace) calc(var(--espace) * 1.13)}
.actus-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.actu{position:relative;display:flex;flex-direction:column;height:100%;padding:12px 12px 20px;background:var(--carte);border:1px solid var(--trait)}
.actu .actu-vue{margin:0;overflow:hidden;aspect-ratio:16 / 10;background:#000}
.actu .actu-vue a{display:block;height:100%}
.actu .actu-vue img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.actu:hover .actu-vue img{transform:scale(1.05)}
.actu .actu-date{margin-top:18px;font-size:11px;color:var(--gris-sombre)}
.actu .actu-titre{margin-top:10px;font-size:24px;line-height:1.15}
.actu::after{content:"Lire l'article →";margin-top:auto;padding-top:18px;font-size:11px;color:var(--blanc)}
.actus-vide{padding:26px;border:1px dashed var(--trait-clair)}

/* ---------- Flèche de retour en haut ----------
   Fixe en bas à droite, semi-transparente, affichée après un écran de
   défilement (classe « est-visible »). */
.haut{position:fixed;right:var(--marge);bottom:var(--marge);z-index:55;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s,visibility .3s,transform .3s}
.haut.est-visible{opacity:.72;visibility:visible;transform:none}
.haut.est-visible:hover{opacity:1}
.haut a{display:block;width:46px;height:46px;overflow:hidden;font-size:0;border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .2s,border-color .2s;
  background:rgba(7,7,7,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20' fill='none' stroke='%23fff' stroke-width='1.500'%3E%3Cpath d='M8 19V2M2 8l6-6 6 6'/%3E%3C/svg%3E") center / 14px no-repeat}
.haut a:hover{background-color:var(--orange-fond);border-color:var(--orange)}

/* ---------- Pied de page ---------- */
.pied{background:var(--carte-plein);padding-top:calc(var(--espace) * .67)}
.pied-haut{display:grid;grid-template-columns:337px minmax(0,410px) minmax(0,290px);justify-content:space-between;gap:40px;align-items:start}
.pied-appel{min-height:318px;padding:34px 30px 28px;background:var(--noir);display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.pied-appel p{font-size:19px;line-height:1.5}
.pied-appel .pied-lien{font-family:var(--mono);font-stretch:100%;font-weight:400;font-size:12px;line-height:1.7;letter-spacing:.06em;color:var(--gris)}
.pied-lien a{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 6px 18px;border:1px solid var(--trait-clair);transition:color .2s,border-color .2s}
.pied-lien a::after{content:"→";width:38px;height:38px;display:grid;place-items:center;background:var(--orange-fond);color:var(--blanc);font-size:16px}
.pied-lien a:hover{color:var(--blanc);border-color:var(--orange)}
.pied-menu{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.pied-menu a{position:relative;display:block;padding:18px 20px;background:var(--noir);transition:background .2s,color .2s}
.pied-menu a::after{content:"";position:absolute;right:20px;top:50%;width:4px;height:4px;margin-top:-2px;border-radius:50%;background:var(--orange)}
.pied-menu a:hover,.pied-menu a.est-courant{background:var(--orange-fond);color:var(--blanc)}
.pied-menu a:hover::after,.pied-menu a.est-courant::after{background:var(--blanc)}
.pied-infos h2{font-size:19px;line-height:1.2;margin-bottom:10px}
.pied-infos h2:not(:first-child){margin-top:34px}
.pied-infos p a{color:var(--blanc);border-bottom:1px solid transparent;transition:border-color .2s}
.pied-infos p a:hover{border-color:var(--orange)}
.pied-infos .pied-reseaux{gap:6px;margin-top:34px}
.pied-reseaux a{width:52px;height:52px;border:0;background-color:var(--noir);background-size:20px}
.pied-cta{position:relative;display:flex;justify-content:center;margin-top:calc(var(--espace) * .56)}
.pied-cta::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--trait)}
.pied-cta .wp-block-button__link{position:relative;box-shadow:0 0 0 22px var(--carte-plein)}
.pied .fantome-pied{font-stretch:62%;font-size:34.3cqw;color:#171717;margin-top:calc(var(--espace) * .47);line-height:.78}
/* Texte de présentation du pied de page : en casse normale, pour rester lisible. */
.pied .pied-textes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 40px;margin-top:calc(var(--espace) * .4);padding-top:34px;
  border-top:1px solid var(--trait);font-size:11.5px;line-height:1.85;letter-spacing:.02em;text-transform:none;color:var(--gris)}
/* marge basse élargie : la flèche de retour en haut ne recouvre pas les liens */
.pied-bas{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-block:34px 100px}
.pied-legal{display:flex;gap:6px;flex-wrap:wrap}
.pied-droits,.pied-legal a{display:block;padding:14px 18px;background:var(--noir);color:#bdbdbd}
.pied-legal a{transition:background .2s,color .2s}
.pied-legal a:hover{color:var(--blanc);background:var(--orange-fond)}

/* ---------- Bandeau cookies ----------
   Masqué par défaut, affiché par le script tant qu'aucun choix n'est
   enregistré. « Refuser » et « Accepter » ont volontairement la même apparence. */
.cookies{display:none;position:fixed;left:var(--marge);bottom:var(--marge);z-index:70;width:min(430px,calc(100vw - 2 * var(--marge)));padding:22px;
  background:#0d0d0d;border:1px solid var(--trait-clair);box-shadow:0 18px 60px rgba(0,0,0,.65)}
.cookies.est-visible{display:block}
.cookies-titre{font-size:19px;line-height:1.1}
.cookies-titre::before{content:"";display:inline-block;width:2px;height:15px;margin-right:10px;vertical-align:-1px;background:var(--orange)}
.cookies .cookies-texte{margin-top:10px;font-size:11.5px;line-height:1.75;letter-spacing:.02em;text-transform:none;color:#a9a9a9}
.cookies-texte a{color:var(--blanc);border-bottom:1px solid var(--orange)}
.cookies .cookies-choix{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
.cookies-bouton a{display:block;padding:14px 10px;text-align:center;background:#0b0b0b;border:1px solid var(--trait-clair);
  font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:14px;line-height:1;letter-spacing:0;color:var(--blanc);transition:background .2s,border-color .2s}
.cookies-bouton a:hover{background:var(--orange-fond);border-color:var(--orange)}

/* ==========================================================================
   PAGES INTÉRIEURES
   ========================================================================== */

/* ---------- Bandeau de page ---------- */
.page-tete{position:relative;min-height:clamp(390px,calc(var(--vh) * 66),680px);padding-top:110px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--noir);color:var(--blanc)}
.page-tete .wp-block-image.page-tete-photo{position:absolute;inset:0;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.14) 88%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 30%,rgba(0,0,0,.5) 62%,rgba(0,0,0,.14) 88%,transparent 100%)}
.page-tete .wp-block-image.page-tete-photo img{width:100%;height:100%;object-fit:cover}
.page-tete-bas{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;gap:14px 40px;padding-bottom:30px}
.page-tete-fil{grid-column:1 / -1;font-size:11px;color:rgba(255,255,255,.78);text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.5)}
.page-tete-fil a:hover{color:var(--orange)}
.page-tete-titre{font-stretch:70%;font-weight:900;font-size:clamp(52px,11.4cqw,178px);line-height:.86;letter-spacing:-.02em;text-wrap:balance}
.page-tete--long .page-tete-titre{font-size:clamp(40px,8cqw,126px);line-height:.9}
.page-tete-texte{max-width:64ch;padding-bottom:.4em;font-size:13px;line-height:1.75;text-align:right;text-shadow:0 1px 2px rgba(0,0,0,.55),0 0 18px rgba(0,0,0,.5)}
/* variante sans photo (pages légales, article) */
.page-tete--simple{min-height:0;padding-top:170px}
.page-tete--simple .page-tete-titre{font-size:clamp(40px,7cqw,104px)}
.legal{max-width:820px;padding-block:calc(var(--espace) * .5) var(--espace)}
.legal h2:first-child{margin-top:0}

/* ---------- Introduction (page Services) ---------- */
.intro{padding-top:var(--espace)}
.intro-phrase{max-width:26em;margin-left:auto;font-size:clamp(24px,2.65vw,39px);line-height:1.28}

/* ---------- Sommaire (page Galerie) ---------- */
.sommaire{display:flex;flex-wrap:wrap;gap:6px;padding-top:calc(var(--espace) * .5);counter-reset:sommaire}
.sommaire li{counter-increment:sommaire}
.sommaire a{display:flex;gap:12px;padding:14px 18px;background:var(--carte);border:1px solid var(--trait);color:var(--blanc);font-size:11px;transition:background .2s,border-color .2s}
.sommaire a::before{content:counter(sommaire,decimal-leading-zero);font-weight:500;color:var(--orange);transition:color .2s}
.sommaire a:hover{background:var(--orange-fond);border-color:var(--orange)}
.sommaire a:hover::before{color:var(--blanc)}

/* ---------- Bloc mi-texte, mi-image ---------- */
.univers{padding-top:var(--espace)}
.univers--fin{padding-bottom:calc(var(--espace) * 1.13)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.duo--inverse .duo-vue{order:-1}
.duo-texte{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:34px;padding:34px;background:var(--carte);border:1px solid var(--trait)}
.duo-texte .titre{font-size:clamp(30px,3.7vw,54px)}
.duo-contenu .texte{margin-top:22px}
.duo .wp-block-image.duo-vue{position:relative;overflow:hidden;min-height:clamp(330px,calc(var(--vh) * 64),580px);background:#000}
.duo .wp-block-image.duo-vue img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.8,.2,1),filter .5s}
.duo:hover .wp-block-image.duo-vue img{transform:scale(1.04)}

/* ---------- Galerie de photos ----------
   Bloc Galerie natif. Toutes les vignettes d'une grille ont le même format :
   les rangées restent alignées quelle que soit la photo. La vignette recadre,
   un clic ouvre l'image entière. Format vertical par défaut ; « paysage » pour
   les séries horizontales ; « trois » pour une grille de six photos. */
.wp-block-gallery.mosaique.mosaique.has-nested-images{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:20px 0 0}
.wp-block-gallery.mosaique.mosaique.mosaique--trois.has-nested-images{grid-template-columns:repeat(3,1fr)}
.wp-block-gallery.mosaique.mosaique.has-nested-images figure.wp-block-image:not(#individual-image){width:auto;margin:0;overflow:hidden;background:#000}
.wp-block-gallery.mosaique.mosaique.has-nested-images figure.wp-block-image:not(#individual-image) img{flex:none;width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.2,1),filter .4s}
.wp-block-gallery.mosaique.mosaique.mosaique--paysage.has-nested-images figure.wp-block-image:not(#individual-image) img{aspect-ratio:3 / 2}
.wp-block-gallery.mosaique figure.wp-block-image:hover img{transform:scale(1.05);filter:brightness(.8)}

/* ---------- Cartes de prestation ---------- */
.prestations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.prestation{display:flex;flex-direction:column;gap:14px;padding:26px 26px 28px;background:var(--carte);border:1px solid var(--trait)}
.prestation h3{font-size:23px;line-height:1.15}
.prestation p{font-size:16px;line-height:1.6;color:#bdbdbd}
.prestation .prestation-lien{margin-top:auto;padding-top:8px;font-family:var(--mono);font-size:11px;line-height:1.7;letter-spacing:.06em;text-transform:uppercase;color:var(--blanc)}
.prestation-lien a::after{content:" →";color:var(--orange)}

/* ---------- Page de ville : texte et carte ---------- */
.secteur-page{padding-top:var(--espace)}
.ville-grille{display:grid;grid-template-columns:1.4fr 1fr;gap:30px 60px;align-items:start}
.carte-bloc{padding:22px 22px 18px;background:var(--carte);border:1px solid var(--trait)}
/* Carte des secteurs : le fond (trame, rivières, points, rayons) est une image
   de la feuille de style ; les noms de villes sont de vrais liens posés dessus. */
.carte{position:relative;aspect-ratio:372 / 510;background:center / 100% 100% no-repeat}
.carte .carte-nom{position:absolute;transform:translateY(-50%);font-size:11px;line-height:1;white-space:nowrap}
.carte-nom a{color:var(--gris);transition:color .2s}
.carte-nom a:hover{color:var(--blanc)}
.carte-bloc .carte-legende{margin-top:12px;font-size:11px}

/* Liste des cinq secteurs (page Secteurs) */
.texte .secteurs-liste{display:grid;gap:5px;margin-top:2.2em}
.secteur-ligne{position:relative;display:grid;grid-template-columns:96px 150px 1fr 20px;align-items:baseline;gap:6px 22px;padding:20px 22px;
  background:var(--carte);border:1px solid var(--trait);transition:border-color .2s}
.secteur-ligne::after{content:"→";font-family:var(--mono);color:var(--orange);transition:transform .25s}
.secteur-ligne:hover{border-color:var(--orange)}
.secteur-ligne:hover::after{transform:translateX(4px)}
.texte .secteur-ligne p{margin-top:0}
.secteur-ligne .secteur-dep{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--orange)}
.secteur-ligne .secteur-nom{margin:0;font-size:26px;line-height:1}
.secteur-ligne .secteur-desc{font-size:15px;line-height:1.5;color:#bdbdbd}

/* Bande de trois photos */
.bande-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:20px}
.bande-photos .wp-block-image img{width:100%;aspect-ratio:4 / 3;object-fit:cover}

/* Liens vers les autres secteurs */
.autres-secteurs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:5px}
.autre{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 22px;background:var(--carte);border:1px solid var(--trait);transition:background .2s,border-color .2s}
.autre-dep{font-size:11px;color:var(--gris);transition:color .2s}
.autre-nom{font-size:20px;line-height:1.15}
.autre-nom a::after{content:" →";font-family:var(--mono);font-stretch:100%;font-weight:500;color:var(--orange);transition:color .2s}
.autre:hover{background:var(--orange-fond);border-color:var(--orange)}
/* variante des pages de service : libellés plus longs (« Photographe de mariage à … »), donc un peu plus petits */
.autres-secteurs--service .autre-nom{font-size:17px}
.autre:hover .autre-dep,.autre:hover .autre-nom a::after{color:var(--blanc)}

/* ---------- Bandeau d'appel au contact ---------- */
.appel{margin-top:var(--espace);padding-block:calc(var(--espace) * .7);border-block:1px solid var(--trait)}
.appel-interieur{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.appel-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.appel-tel{font-size:32px;line-height:1;letter-spacing:.01em}
.appel-tel a,.coordonnees-tel a{transition:color .2s}
.appel-tel a:hover,.coordonnees-tel a:hover{color:var(--orange)}
.wp-block-post-content > .appel:last-child,main > .appel:last-child{margin-bottom:var(--espace)}

/* ---------- Contact ----------
   Le formulaire est celui de Contact Form 7 ; son gabarit porte ces classes. */
.contact-grille{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;align-items:start}
.formulaire{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:30px;background:var(--carte);border:1px solid var(--trait)}
.champ{display:flex;flex-direction:column;gap:8px;margin:0}
.champ--large{grid-column:1 / -1}
.champ label{font-size:11px;color:var(--gris)}
.champ .wpcf7-form-control-wrap{display:block}
.champ input:not([type="checkbox"]):not([type="submit"]),.champ select,.champ textarea{width:100%;padding:14px 16px;background:var(--noir);
  border:1px solid var(--trait-clair);border-radius:0;font-family:var(--titre);font-stretch:100%;font-weight:400;font-size:16px;line-height:1.4;
  letter-spacing:0;text-transform:none;color:var(--blanc);transition:border-color .2s}
.champ textarea{display:block;min-height:150px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:2px solid var(--orange);outline-offset:2px;border-color:var(--orange)}
/* Champs du navigateur (calendrier, flèches des nombres) en version sombre. */
.formulaire{color-scheme:dark}
.formulaire-aide{font-size:11.5px;line-height:1.7;letter-spacing:.02em;text-transform:none;color:var(--gris)}
/* Questions propres au type de projet : un encadré qui apparaît sous le choix. */
.questions-projet{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:22px;border:1px dashed var(--trait-clair)}
.questions-titre{grid-column:1 / -1;font-size:11px;color:var(--blanc)}
.question-suite{display:contents}
.champ--cases{min-width:0;padding:0;border:0}
.champ--cases legend{padding:0;margin-bottom:10px;font-size:11px;color:var(--gris)}
.champ--cases .wpcf7-checkbox{display:flex;flex-wrap:wrap;gap:8px}
.champ--cases .wpcf7-list-item{margin:0}
.champ--cases label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border:1px solid var(--trait-clair);background:var(--noir);
  font-size:11.5px;line-height:1.4;letter-spacing:.02em;text-transform:none;color:var(--blanc);cursor:pointer;transition:border-color .2s}
.champ--cases label:hover,.champ--cases label:has(input:checked){border-color:var(--orange)}
.champ--cases input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--orange)}
.champ--accord label{display:flex;align-items:flex-start;gap:12px;font-size:11.5px;line-height:1.7;letter-spacing:.02em;text-transform:none}
.champ--accord .wpcf7-list-item{margin:0}
.champ--accord input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--orange)}
/* Anti-robot : une question de calcul (visible) et un champ piège (invisible,
   seul un robot le remplit ; le contrôle se fait dans functions.php). */
.champ-titre{font-size:11px;color:var(--gris)}
.champ--quiz label{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;font-size:12px;line-height:1.6;color:var(--blanc)}
.formulaire .champ--quiz input[type="text"]{width:110px;text-align:center}
.formulaire .champ--piege{display:none}
.formulaire .wpcf7-submit{align-self:flex-start;padding:17px 24px;background:#0b0b0b;border:1px solid var(--trait-clair);border-radius:0;cursor:pointer;
  font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:15px;line-height:1;letter-spacing:0;text-transform:uppercase;color:var(--blanc);
  transition:background .25s,border-color .25s}
.formulaire .wpcf7-submit:hover{background:var(--orange-fond);border-color:var(--orange)}
.wpcf7-spinner{display:none}
.wpcf7-not-valid-tip{margin-top:6px;font-size:11px;color:var(--orange)}
.wpcf7 form .wpcf7-response-output{margin:14px 0 0;padding:14px 16px;border:1px dashed var(--orange);font-size:11.5px;line-height:1.7;letter-spacing:.02em;text-transform:none;color:var(--blanc)}
.wpcf7 form .wpcf7-response-output:empty{display:none}
.coordonnees{display:grid;gap:30px;padding:30px;background:var(--carte);border:1px solid var(--trait)}
.coordonnees h2{margin-bottom:8px;font-size:19px;line-height:1.2}
.coordonnees-tel{font-size:34px;line-height:1;letter-spacing:.01em}

/* ---------- Article (Actualités) ---------- */
.article-corps{max-width:820px;margin-inline:auto;padding:calc(var(--espace) * .5) var(--marge) var(--espace)}
.article-corps > * + *{margin-top:1.1em}
.article-corps .wp-block-image img{width:100%}
.article-image{max-width:1600px;margin:calc(var(--espace) * .4) auto 0;padding-inline:var(--marge)}
.article-image img{width:100%;height:auto;max-height:min(78svh,720px);object-fit:cover} /* une photo en hauteur ne remplit pas tout l'écran */
.wp-block-query-pagination{display:flex;gap:6px;margin-top:30px;font-size:11px}
.wp-block-query-pagination a,.wp-block-query-pagination .current{padding:12px 16px;background:var(--carte);border:1px solid var(--trait);color:var(--blanc)}
.wp-block-query-pagination .current,.wp-block-query-pagination a:hover{background:var(--orange-fond);border-color:var(--orange)}

/* ---------- Écrans moyens (tablette, petite fenêtre) ---------- */
@media (max-width:1100px){
  .service.est-actif{flex-grow:3.4}
  .service.est-actif .wp-block-image.service-image,.service.est-actif .service-titre,.service.est-actif .service-corps{min-width:300px}
  .service.est-actif .service-titre{font-size:26px;margin-top:20px}
  .service-titre{font-size:21px}
  .villes{grid-template-columns:repeat(3,1fr)}
  .pied-haut{grid-template-columns:1fr 1fr}
  .pied-appel{grid-column:1 / -1;min-height:0}
  .studio{grid-template-columns:1fr}
  .page-tete-texte{max-width:46ch}
  .ville-grille{grid-template-columns:1fr;max-width:820px}
  .carte-bloc{max-width:420px}
  .contact-grille{grid-template-columns:1fr}
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  :root{--marge:20px;--espace:84px}
  .admin-bar .entete{top:46px}
  .rep{padding-bottom:18px}
  .nav{padding-block:10px}
  .nav .wp-block-site-logo img{width:118px}
  .entete.est-compact .wp-block-site-logo img{width:86px}
  .nav-bascule{padding:0 12px;gap:9px}
  .menu-interieur{grid-template-columns:1fr;align-items:start;gap:34px;padding-block:104px 32px}
  .menu-liens > li{gap:2px 16px}
  .menu-cote{align-items:flex-start;text-align:left}
  .hero{min-height:min(480px,100svh)}
  .hero-bas{grid-template-columns:1fr;row-gap:16px;font-size:11px}
  .hero-gauche{gap:12px}
  .hero-defile{font-size:11px;gap:14px}
  .hero-accroche{text-align:left}
  .apropos-grille{grid-template-columns:minmax(0,1fr);row-gap:32px}
  /* une seule colonne, dans l'ordre : phrase, portrait, mention, chiffres */
  .apropos-droite{display:contents}
  .apropos-phrase{order:1;top:0}
  .apropos-grille .wp-block-image.apropos-portrait{order:2;min-height:0;aspect-ratio:1 / 1}
  .apropos-conf{order:3}
  .apropos-droite .chiffres{order:4;margin-top:0}
  .chiffre{min-height:170px;padding:18px;grid-template-columns:minmax(0,1fr);row-gap:6px}
  .chiffre-n{font-size:60px}
  .tete{flex-direction:column;align-items:flex-start;margin-bottom:40px}
  .services-rangee{flex-direction:column;height:auto;gap:12px}
  .service,.service.est-actif{flex:none}
  .service{height:86px}
  .service.est-actif{height:520px}
  .service-titre{writing-mode:horizontal-tb;transform:none;left:16px;bottom:18px;font-size:22px}
  .service.est-actif .wp-block-image.service-image,.service.est-actif .service-titre,.service.est-actif .service-corps{min-width:0}
  .projets{grid-template-columns:1fr;gap:12px}
  .studio-tete{flex-direction:column;padding:22px}
  .studio-corps{padding:30px 22px}
  .studio-liste{grid-template-columns:1fr}
  .studio-pied{flex-direction:column;align-items:flex-start;padding:22px}
  .studio-prix strong{font-size:48px}
  .studio-contact{padding:22px}
  .avis-google{width:100%}
  .references{grid-template-columns:1fr;gap:12px}
  .reference{padding:20px 22px 24px}
  .villes{grid-template-columns:1fr 1fr;gap:28px 12px}
  .actus-grille{grid-template-columns:1fr;gap:12px}
  .haut a{width:42px;height:42px}
  .pied-haut{grid-template-columns:1fr}
  .pied-appel{grid-column:auto}
  .pied .pied-textes{grid-template-columns:1fr}
  .pied-bas{padding-block:28px 78px}
  .texte{font-size:16px}
  .texte .chapeau{font-size:18px}
  .page-tete{min-height:340px}
  .page-tete-bas{grid-template-columns:1fr;gap:12px;padding-bottom:22px}
  .page-tete-texte{text-align:left;font-size:11px}
  .page-tete--simple{padding-top:120px;min-height:0}
  .intro-phrase{margin-left:0}
  .duo{grid-template-columns:1fr;gap:12px}
  .duo--inverse .duo-vue{order:0}
  .duo-texte{padding:22px;gap:26px}
  .duo .wp-block-image.duo-vue{min-height:280px}
  .wp-block-gallery.mosaique.mosaique.has-nested-images,.wp-block-gallery.mosaique.mosaique.mosaique--trois.has-nested-images{grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
  .prestations{gap:12px}
  .secteur-ligne{grid-template-columns:1fr 20px;padding:18px}
  .secteur-ligne > *{grid-column:1}
  .secteur-ligne::after{grid-column:2;grid-row:1}
  .bande-photos{grid-template-columns:1fr;gap:12px;padding-top:12px}
  .appel-tel{font-size:28px}
  .formulaire{grid-template-columns:1fr;padding:20px;gap:16px}
  .questions-projet{grid-template-columns:1fr;padding:16px;gap:16px}
  .coordonnees{padding:22px}
}

/* Défilement doux pour les ancres, sauf si le visiteur a demandé moins d'animations. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  /* un fondu n'est pas un mouvement : le défilement du haut le garde */
  .hero-diapos .wp-block-image.hero-photo{transition:opacity 1.2s ease!important}
}

/* ---------- Galeries : n'importe quel nombre de photos, sans trou en bas ----------
   Le client ajoute, retire et réordonne les photos dans le bloc Galerie. La grille est
   découpée en 12 colonnes : une vignette en occupe 3 (galerie à 4 colonnes) ou 4 (à 3
   colonnes). Quand la dernière rangée n'est pas pleine, ses vignettes s'élargissent pour
   la remplir, et leur format s'allonge d'autant (--largeur) pour garder la même hauteur. */
.wp-block-gallery.mosaique{--rapport:.8}
.wp-block-gallery.mosaique.mosaique--paysage{--rapport:1.5}
.wp-block-gallery.mosaique.mosaique.has-nested-images figure.wp-block-image:not(#individual-image) img{aspect-ratio:calc(var(--rapport) * var(--largeur,1))}
@media (min-width:761px){
  .wp-block-gallery.mosaique.mosaique.has-nested-images,
  .wp-block-gallery.mosaique.mosaique.mosaique--trois.has-nested-images{grid-template-columns:repeat(12,minmax(0,1fr))}
  .wp-block-gallery.mosaique.has-nested-images > figure{grid-column:span 3}
  .wp-block-gallery.mosaique.mosaique--trois.has-nested-images > figure{grid-column:span 4}
  /* 4 colonnes : il reste 1 photo → les 5 dernières font une rangée de 2 et une de 3 ; il en reste 2 → moitié chacune ; 3 → tiers. */
  .wp-block-gallery.mosaique:not(.mosaique--trois):has(> figure:last-child:nth-child(4n+1)) > figure:is(:nth-last-child(5),:nth-last-child(4)),
  .wp-block-gallery.mosaique:not(.mosaique--trois):has(> figure:last-child:nth-child(4n+2)) > figure:nth-last-child(-n+2){grid-column:span 6;--largeur:2}
  .wp-block-gallery.mosaique:not(.mosaique--trois):has(> figure:last-child:nth-child(4n+1)) > figure:nth-last-child(-n+3),
  .wp-block-gallery.mosaique:not(.mosaique--trois):has(> figure:last-child:nth-child(4n+3)) > figure:nth-last-child(-n+3){grid-column:span 4;--largeur:1.333}
  /* 3 colonnes : il reste 1 photo → les 4 dernières font deux rangées de 2 ; il en reste 2 → moitié chacune. */
  .wp-block-gallery.mosaique.mosaique--trois:has(> figure:last-child:nth-child(3n+1)) > figure:nth-last-child(-n+4),
  .wp-block-gallery.mosaique.mosaique--trois:has(> figure:last-child:nth-child(3n+2)) > figure:nth-last-child(-n+2){grid-column:span 6;--largeur:1.5}
  /* une seule photo : elle garde la taille d'une vignette */
  .wp-block-gallery.mosaique:has(> figure:only-child) > figure{grid-column:span 6;--largeur:1}
}
@media (max-width:760px){
  /* 2 colonnes : une photo seule en bas prend toute la largeur. */
  .wp-block-gallery.mosaique:has(> figure:last-child:nth-child(2n+1)) > figure:last-child{grid-column:1 / -1;--largeur:2}
}

/* ---------- Blocs texte-image libres (pages créées dans l'espace client) ----------
   Le texte est dans un cadre comme sur l'accueil ; la photo, à côté, prend la hauteur du
   texte et garde au moins une hauteur proportionnée à son format (pseudo-élément
   ::before), sans jamais déborder : portrait = colonne photo plus étroite et plus haute,
   carré = colonnes presque égales, paysage = moitié-moitié. */
.univers--libre .duo .wp-block-image.duo-vue{min-height:0}
.univers--libre .duo .wp-block-image.duo-vue::before{content:"";display:block;padding-top:66%}
.univers--libre .duo--portrait{grid-template-columns:7fr 5fr}
.univers--libre .duo--portrait.duo--inverse{grid-template-columns:5fr 7fr}
.univers--libre .duo--portrait .wp-block-image.duo-vue::before{padding-top:125%}
.univers--libre .duo--carre{grid-template-columns:6fr 5fr}
.univers--libre .duo--carre.duo--inverse{grid-template-columns:5fr 6fr}
.univers--libre .duo--carre .wp-block-image.duo-vue::before{padding-top:100%}
.univers--libre .duo-texte .titre{font-size:clamp(28px,3.2vw,46px)}
.univers--libre + .univers--libre{padding-top:calc(var(--espace) * .6)}
.rep p:empty{display:none}

/* ---------- Cartes de galerie de l'accueil : n'importe quel nombre, sans trou ----------
   Grille de 6 colonnes, une carte en occupe 2 ; une dernière rangée incomplète se
   répartit sur toute la largeur (cartes plus larges, image allongée d'autant). */
@media (min-width:1101px){
  .projets{grid-template-columns:repeat(6,minmax(0,1fr))}
  .projets > .projet{grid-column:span 2}
  .projets:has(> .projet:last-child:nth-child(3n+1)) > .projet:nth-last-child(-n+4),
  .projets:has(> .projet:last-child:nth-child(3n+2)) > .projet:nth-last-child(-n+2){grid-column:span 3;--largeur:1.5}
  .projets:has(> .projet:only-child) > .projet{grid-column:span 3}
  .projet .wp-block-image.projet-vue{aspect-ratio:calc(646 / 500 * var(--largeur,1))}
}
/* Écran moyen : deux colonnes ; une carte seule en bas prend toute la largeur. */
@media (min-width:761px) and (max-width:1100px){
  .projets:has(> .projet:last-child:nth-child(2n+1)) > .projet:last-child{grid-column:1 / -1}
  .projets:has(> .projet:last-child:nth-child(2n+1)) > .projet:last-child .wp-block-image.projet-vue{aspect-ratio:calc(646 / 500 * 2)}
}
/* Téléphone : blocs texte-image libres sur une colonne, quelle que soit la photo. */
@media (max-width:760px){
  .univers--libre .duo[class]{grid-template-columns:1fr}
}

/* ---------- Actualités : grille « bento » ----------
   Quatre colonnes ; par séries de six articles : une grande carte (2 × 2), une large, deux petites,
   deux larges. Le titre se lit sur un dégradé sombre au bas de la photo (contraste suffisant) ;
   le résumé n'apparaît que sur la grande carte. Toute la carte est cliquable (lien du titre),
   l'ordre de lecture reste celui des articles. Une dernière série incomplète s'élargit pour ne
   pas laisser de trou. */
.actus-bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(210px,19vw,290px);gap:20px;margin:0;padding:0;list-style:none}
.actus-bento > li{margin:0;min-width:0}
.actus-bento > li:nth-child(6n+1){grid-column:span 2;grid-row:span 2}
.actus-bento > li:is(:nth-child(6n+2),:nth-child(6n+5),:nth-child(6n+6)){grid-column:span 2}
.actus-bento:has(> li:last-child:nth-child(6n+1)) > li:last-child{grid-column:1 / -1}
.actus-bento:has(> li:last-child:nth-child(6n+2)) > li:last-child{grid-row:span 2}
.actus-bento:has(> li:last-child:nth-child(6n+3)) > li:last-child{grid-column:span 2}
.actus-bento:has(> li:last-child:nth-child(6n+5)) > li:last-child{grid-column:1 / -1}
.carte-actu{position:relative;height:100%;overflow:hidden;background:#000;border:1px solid var(--trait)}
.actus-bento .carte-actu-vue{position:absolute;inset:0;margin:0}
.actus-bento .carte-actu-vue a{display:block;height:100%}
.actus-bento .carte-actu-vue img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.carte-actu:hover .carte-actu-vue img{transform:scale(1.05)}
.actus-bento .carte-actu-texte{position:absolute;inset:auto 0 0;display:flex;flex-direction:column;gap:8px;padding:60px 22px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.94) 0,rgba(0,0,0,.82) 55%,rgba(0,0,0,0) 100%)}
.carte-actu-date{font-size:11px;color:var(--gris)}
.carte-actu-titre{font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:clamp(20px,1.7vw,26px);line-height:1.08;text-transform:uppercase;color:var(--blanc)}
.carte-actu-titre a::before{content:"";position:absolute;inset:0;z-index:1}
.carte-actu-titre a:focus-visible{outline:none}
.carte-actu:has(.carte-actu-titre a:focus-visible){outline:2px solid var(--orange);outline-offset:3px}
.actus-bento > li:nth-child(6n+1) .carte-actu-titre{font-size:clamp(28px,3vw,46px)}
.carte-actu-resume{font-family:var(--titre);font-stretch:100%;font-size:16px;line-height:1.5;letter-spacing:0;text-transform:none;color:#d8d8d8}
.carte-actu-resume p{margin:0}
.actus-bento > li:not(:nth-child(6n+1)) .carte-actu-resume{display:none}
.carte-actu-lieux{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;font-size:10px}
.carte-actu-lieux a,.article-lieux a{display:inline-block;padding:3px 8px;border:1px solid rgba(255,255,255,.3);color:var(--blanc);transition:border-color .2s}
.carte-actu-lieux a:hover,.article-lieux a:hover{border-color:var(--orange)}
.carte-actu-lieux .wp-block-post-terms__separator,.article-lieux .wp-block-post-terms__separator{display:none}
.actus-bento-requete .wp-block-query-pagination,.actus-mosaique-requete .wp-block-query-pagination{margin-top:30px}
@media (max-width:1100px){
  .actus-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(220px,34vw,320px)}
  .actus-bento > li:is(:nth-child(n)){grid-column:span 1;grid-row:span 1}
  .actus-bento > li:nth-child(3n+1){grid-column:1 / -1;grid-row:span 2}
  .actus-bento:has(> li:last-child:nth-child(3n+2)) > li:last-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .actus-bento{grid-template-columns:1fr;grid-auto-rows:300px;gap:12px}
  .actus-bento > li:is(:nth-child(n)){grid-column:auto;grid-row:span 1}
  .actus-bento .carte-actu-resume{display:none}
}

/* ---------- Actualités : essai en mosaïque (« masonry ») ----------
   Chaque photo garde son format. Mosaïque native (« grid-lanes ») là où le navigateur la connaît
   (Safari depuis 2026), sinon colonnes CSS. */
.actus-mosaique{columns:3 300px;column-gap:20px;margin:0;padding:0;list-style:none}
.actus-mosaique > li{break-inside:avoid;margin:0 0 20px}
@supports (display:grid-lanes){
  .actus-mosaique{display:grid-lanes;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;columns:auto}
  .actus-mosaique > li{margin:0}
}
.actus-mosaique .carte-actu{background:var(--carte)}
.actus-mosaique .carte-actu-vue{margin:0}
.actus-mosaique .carte-actu-vue img{width:100%;height:auto;display:block;transition:transform .7s cubic-bezier(.22,.8,.2,1)}
.actus-mosaique .carte-actu-texte{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}

/* ---------- Page d'un article ---------- */
.article-infos{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:18px;font-size:11px;color:var(--gris)}
.article-date time::before{content:"Publié le "}
.article-maj time::before{content:"Mis à jour le "}
.article-lieux{display:flex;flex-wrap:wrap;gap:6px}
.article-corps h2{margin-top:1.6em}
.article-corps .wp-block-image{margin-block:1.6em}
.article-corps figcaption{margin-top:8px;font-size:11px;color:var(--gris)}
.article-villes{margin-top:2em;padding-top:1.2em;border-top:1px dashed var(--trait-clair)}
.article-retour{display:flex;justify-content:center;padding-bottom:calc(var(--espace) * .6)}

/* ---------- Bandeau d'information (réglage « Bandeau d'information ») ----------
   Une ligne en tête de l'en-tête fixe, sur fond orange foncé (texte blanc : 4,7:1). Elle disparaît
   dès que l'en-tête s'amincit au défilement, pour ne pas gêner la lecture. */
.bandeau-info{display:flex;justify-content:center;padding:8px var(--marge);background:var(--orange-fond);color:var(--blanc);text-align:center}
.bandeau-info p{margin:0;font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.04em;text-transform:uppercase}
.bandeau-info a{margin-left:8px;text-decoration:underline;text-underline-offset:3px}
.bandeau-info a:hover{text-decoration-thickness:2px}
.entete.est-compact .bandeau-info{display:none}
@media (max-width:760px){.bandeau-info p{font-size:10px}}

/* ---------- Bouton flottant « Demander un devis », avec reflet (variante « double ») ----------
   Il apparaît au défilement avec la flèche « haut de page », à sa gauche, sur toutes les pages sauf
   Contact. Le reflet est une bande posée DERRIÈRE le texte (le texte reste net), animée en
   « transform » seulement : aucune image, quelques lignes de CSS. Il s'arrête au survol et au
   clavier, et n'existe pas pour les visiteurs qui ont demandé moins d'animations.
   Réglable dans « Mon site → Effets » : --reflet (0 = aucun), --reflet-duree, --reflet-etat. */
.cta-flottant{position:fixed;right:calc(var(--marge) + 46px + 12px);bottom:var(--marge);z-index:54;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .3s,visibility .3s}
.cta-flottant.est-visible{opacity:1;visibility:visible;transform:none}
.cta-flottant a{position:relative;display:inline-flex;align-items:center;gap:12px;overflow:hidden;isolation:isolate;min-height:46px;padding:15px 24px;
  background:var(--orange-fond);border:1px solid var(--orange);color:var(--blanc);box-shadow:0 8px 24px rgba(0,0,0,.5);
  font-family:var(--titre);font-stretch:68%;font-weight:800;font-size:16px;line-height:1;letter-spacing:0;text-transform:uppercase;transition:background .2s}
.cta-flottant a::after{content:"→";font-stretch:100%;font-weight:400}
.cta-flottant a::before{content:"";position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:45%;pointer-events:none;opacity:0;
  transform:translateX(-160%) skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.cta-flottant a:hover{background:#d9500c}
.cta-flottant a:focus-visible{outline-color:#fff}
@media (prefers-reduced-motion:no-preference){
  .cta-flottant a::before{opacity:var(--reflet,1);animation:reflet-double var(--reflet-duree,7s) ease-in-out infinite;animation-play-state:var(--reflet-etat,running)}
  .cta-flottant a:hover::before,.cta-flottant a:focus-visible::before{animation-play-state:paused}
}
@keyframes reflet-double{0%,60%{transform:translateX(-160%) skewX(-22deg)}72%{transform:translateX(420%) skewX(-22deg)}72.01%{transform:translateX(-160%) skewX(-22deg)}84%,100%{transform:translateX(420%) skewX(-22deg)}}
.menu-ouvert .cta-flottant{display:none}
@media (max-width:760px){
  .cta-flottant{right:calc(var(--marge) + 42px + 10px)}
  .cta-flottant a{min-height:44px;padding:13px 16px;font-size:15px}
}

/* ---------- Corrections du 20 octobre 2026 ---------- */

/* Au-dessus de la flottaison (« above the fold ») : le bandeau d'accueil ne dépasse jamais la hauteur
   visible de la fenêtre (svh = la plus petite hauteur, barres d'outils du navigateur comprises), et
   « Alain Maigre » se réduit si la fenêtre est large mais peu haute. Du CSS seulement : aucun script. */

/* Diaporama : en quittant le haut de page, le bas des photos se fond progressivement dans le noir du site
   (un voile noir dont l'opacité suit le défilement : léger pour le navigateur, comme le zoom). */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent 28%,rgba(7,7,7,.55) 62%,var(--noir) 94%)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hero::before{animation:hero-noircit linear both;animation-timeline:scroll(root);animation-range:0 85vh}
  }
}
@keyframes hero-noircit{to{opacity:1}}

/* Grands mots en fond (« Galerie », « Maigre ») : ils glissent et s'éclaircissent en traversant l'écran
   (même amplitude que la parallaxe des photos : réglage « Glissement des photos »). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fantome{animation:fantome-traverse linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes fantome-traverse{
  from{opacity:.15;translate:0 calc(var(--parallaxe) * 4)}
  50%{opacity:1;translate:0 0}
  to{opacity:.15;translate:0 calc(var(--parallaxe) * -4)}
}

/* Second champ piège du formulaire (anti-robots) : hors de l'écran, pas masqué par display:none, que
   certains robots reconnaissent ; invisible et inaccessible pour les visiteurs. */
.formulaire .champ--piege2{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* Cadrages choisis dans l'éditeur (Styles du bloc Image) */
.wp-block-image.is-style-cadre-haut img{object-position:50% 15%}
.wp-block-image.is-style-cadre-bas img{object-position:50% 85%}
.wp-block-image.is-style-cadre-gauche img{object-position:12% 50%}
.wp-block-image.is-style-cadre-droite img{object-position:88% 50%}
.wp-block-image.is-style-cadre-haut-droite img{object-position:92% 0}

/* ---------- Carte des secteurs : fonds et positions des noms (produits par construire.py) ---------- */
.carte .carte-nom--lyon{top:10.94%;left:calc(30.46% + 12px)}
.carte--lyon{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='113.3' y1='55.8' x2='301.5' y2='228.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='113.3' y1='55.8' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='113.3' y1='55.8' x2='95.3' y2='417.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='113.3' y1='55.8' x2='129.0' y2='459.3' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='13' fill='none' stroke='%23fd590b' opacity='.55'/%3E%3Ccircle cx='113.3' cy='55.8' r='5' fill='%23fd590b'/%3E%3Ccircle cx='301.5' cy='228.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='125.4' cy='305.1' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='95.3' cy='417.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='129.0' cy='459.3' r='3' fill='%238b8b8b'/%3E%3C/svg%3E")}
.carte--lyon .carte-nom--lyon a{color:var(--blanc);font-weight:700}
.carte .carte-nom--grenoble{top:44.82%;right:calc(18.95% + 12px)}
.carte--grenoble{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='301.5' y1='228.6' x2='113.3' y2='55.8' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='301.5' y1='228.6' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='301.5' y1='228.6' x2='95.3' y2='417.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='301.5' y1='228.6' x2='129.0' y2='459.3' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='301.5' cy='228.6' r='13' fill='none' stroke='%23fd590b' opacity='.55'/%3E%3Ccircle cx='301.5' cy='228.6' r='5' fill='%23fd590b'/%3E%3Ccircle cx='125.4' cy='305.1' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='95.3' cy='417.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='129.0' cy='459.3' r='3' fill='%238b8b8b'/%3E%3C/svg%3E")}
.carte--grenoble .carte-nom--grenoble a{color:var(--blanc);font-weight:700}
.carte .carte-nom--valence{top:59.82%;left:calc(33.71% + 12px)}
.carte--valence{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='125.4' y1='305.1' x2='113.3' y2='55.8' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='125.4' y1='305.1' x2='301.5' y2='228.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='125.4' y1='305.1' x2='95.3' y2='417.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='125.4' y1='305.1' x2='129.0' y2='459.3' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='301.5' cy='228.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='125.4' cy='305.1' r='13' fill='none' stroke='%23fd590b' opacity='.55'/%3E%3Ccircle cx='125.4' cy='305.1' r='5' fill='%23fd590b'/%3E%3Ccircle cx='95.3' cy='417.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='129.0' cy='459.3' r='3' fill='%238b8b8b'/%3E%3C/svg%3E")}
.carte--valence .carte-nom--valence a{color:var(--blanc);font-weight:700}
.carte .carte-nom--montelimar{top:81.88%;right:calc(74.38% + 12px)}
.carte--montelimar{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='95.3' y1='417.6' x2='113.3' y2='55.8' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='95.3' y1='417.6' x2='301.5' y2='228.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='95.3' y1='417.6' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='95.3' y1='417.6' x2='129.0' y2='459.3' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='301.5' cy='228.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='125.4' cy='305.1' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='95.3' cy='417.6' r='13' fill='none' stroke='%23fd590b' opacity='.55'/%3E%3Ccircle cx='95.3' cy='417.6' r='5' fill='%23fd590b'/%3E%3Ccircle cx='129.0' cy='459.3' r='3' fill='%238b8b8b'/%3E%3C/svg%3E")}
.carte--montelimar .carte-nom--montelimar a{color:var(--blanc);font-weight:700}
.carte .carte-nom--grignan{top:90.06%;left:calc(34.68% + 12px)}
.carte--grignan{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='129.0' y1='459.3' x2='113.3' y2='55.8' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='129.0' y1='459.3' x2='301.5' y2='228.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='129.0' y1='459.3' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='129.0' y1='459.3' x2='95.3' y2='417.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='301.5' cy='228.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='125.4' cy='305.1' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='95.3' cy='417.6' r='3' fill='%238b8b8b'/%3E%3Ccircle cx='129.0' cy='459.3' r='13' fill='none' stroke='%23fd590b' opacity='.55'/%3E%3Ccircle cx='129.0' cy='459.3' r='5' fill='%23fd590b'/%3E%3C/svg%3E")}
.carte--grignan .carte-nom--grignan a{color:var(--blanc);font-weight:700}
.carte--toutes{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 372 510'%3E%3Cdefs%3E%3Cpattern id='g' width='18' height='18' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23242424'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='372' height='510' fill='url(%23g)'/%3E%3Cpolyline points='112.2,0.0 112.2,63.0 120.7,129.0 105.9,210.0 112.2,264.0 122.8,306.0 101.6,360.0 88.9,417.0 80.5,471.0 76.2,510.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpolyline points='370.6,177.0 330.3,207.0 300.7,228.0 271.1,201.0 216.0,240.0 158.8,270.0 120.7,288.0' fill='none' stroke='%23363636' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='95.9' y='186.0' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ERH%C3%94NE%3C/text%3E%3Ctext x='224.5' y='274.0' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3EIS%C3%88RE%3C/text%3E%3Ctext x='360' y='24' text-anchor='end' font-family='monospace' font-size='9' letter-spacing='.7' fill='%235a5a5a'%3ENORD %E2%86%91%3C/text%3E%3Cline x1='113.3' y1='55.8' x2='301.5' y2='228.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='301.5' y1='228.6' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='125.4' y1='305.1' x2='95.3' y2='417.6' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='95.3' y1='417.6' x2='129.0' y2='459.3' stroke='%23444' stroke-dasharray='3 5'/%3E%3Cline x1='113.3' y1='55.8' x2='125.4' y2='305.1' stroke='%23444' stroke-dasharray='3 5'/%3E%3Ccircle cx='113.3' cy='55.8' r='5' fill='%23fd590b'/%3E%3Ccircle cx='301.5' cy='228.6' r='5' fill='%23fd590b'/%3E%3Ccircle cx='125.4' cy='305.1' r='5' fill='%23fd590b'/%3E%3Ccircle cx='95.3' cy='417.6' r='5' fill='%23fd590b'/%3E%3Ccircle cx='129.0' cy='459.3' r='5' fill='%23fd590b'/%3E%3C/svg%3E")}
.carte--toutes .carte-nom a{color:var(--blanc);font-weight:700}
.carte--toutes .carte-nom a:hover{color:var(--orange)}