/* =============================================================================
   CamOffice — Aura
   Feuille de style extraite telle quelle de la maquette aura-site.html.
   Seuls ont été ajoutés : l'en-tête @font-face, les URL d'images (sorties du
   base64) et, en fin de fichier, le bloc « ADAPTATIONS WORDPRESS ».
   Ne pas minifier.
   ============================================================================= */

/* === POLICES AUTO-HÉBERGÉES ==================================================
   Déclarations recopiées À L'IDENTIQUE de celles que sert Google Fonts pour la
   requête de la maquette (Courgette ; DM Sans opsz 9..40, 400/500/700) : mêmes
   fichiers, mêmes graisses déclarées, mêmes plages unicode. Courgette n'existe
   qu'en 400 : les graisses 600/700 du CSS sont synthétisées par le navigateur,
   exactement comme dans la maquette. Aucun appel à fonts.googleapis.com.
   Licence SIL OFL 1.1 — assets/fonts/LICENCE.txt
   ============================================================================= */
@font-face{font-family:"Courgette";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/courgette-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Courgette";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/courgette-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* === MAQUETTE === */
:root{
  color-scheme: light;
  --blanc:#FFFFFF; --fond:#FFF7FC; --noir:#0E0A10; --action:#D6007F;
  --rose:#FF94D6; --lilas:#E7BCF3; --bleu:#9BDAFF; --peche:#FFD6C7;
  --wash-rose:#FFE9F5; --wash-bleu:#EDF7FF; --wash-peche:#FFEDE4;
  --filet:#F4E2EE;
  --r-l:36px; --r-m:24px; --r-s:16px;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--blanc);color:var(--noir);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
/* les champs et boutons n'héritent pas de la police par défaut -> ils tombaient en Arial */
button,input,textarea,select{font-family:inherit}

/* ============ ÉCHELLE TYPOGRAPHIQUE — 4 tailles de titres au total ============
   T1 titres de hero · T2 titres de section · T3 sous-titres/cartes · T4 questions
   Aucune autre taille de titre sur la page. */
h1,h2,h3{font-family:"Courgette","Segoe Script",cursive;font-weight:600;letter-spacing:-.02em;line-height:1.07;margin:0;font-optical-sizing:auto;color:#000000}
h1{font-size:clamp(36px,6vw,58px)}          /* T1 */
h2{font-size:clamp(28px,3.6vw,44px)}          /* T2 */
h3{font-size:22px}                             /* T3 */
summary{font-size:18px}                        /* T4 */
p{margin:0}
/* règle typo : jamais de mot orphelin seul sur la dernière ligne */
p,li,blockquote,figcaption,summary,dd,dt,td,th,.lede,.t{text-wrap:pretty}
h1,h2,h3,h4,.amount{text-wrap:balance}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--action)}

/* ---------- surlignage derrière les mots importants (trait à main levée) ----------
   Coup de pinceau SVG irrégulier, étiré derrière le bas des mots. Une couleur
   par variante. box-decoration-break:clone → le trait suit les retours à la ligne. */
.mark{background-repeat:no-repeat;background-position:0 92%;background-size:0% .42em;
  transition:background-size .85s cubic-bezier(.22,1,.36,1) .2s;
  padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M5 14 C70 6 140 5 210 9 C245 11 275 9 296 15 C300 16 297 24 291 22 C230 16 150 19 80 22 C55 23 28 24 7 26 C1 26 1 15 5 14 Z' fill='%23FF94D6'/%3E%3C/svg%3E")}
.mark.b{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M5 14 C70 6 140 5 210 9 C245 11 275 9 296 15 C300 16 297 24 291 22 C230 16 150 19 80 22 C55 23 28 24 7 26 C1 26 1 15 5 14 Z' fill='%239BDAFF'/%3E%3C/svg%3E")}
.mark.l{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M5 14 C70 6 140 5 210 9 C245 11 275 9 296 15 C300 16 297 24 291 22 C230 16 150 19 80 22 C55 23 28 24 7 26 C1 26 1 15 5 14 Z' fill='%23E7BCF3'/%3E%3C/svg%3E")}
.mark.p{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 28' preserveAspectRatio='none'%3E%3Cpath d='M5 14 C70 6 140 5 210 9 C245 11 275 9 296 15 C300 16 297 24 291 22 C230 16 150 19 80 22 C55 23 28 24 7 26 C1 26 1 15 5 14 Z' fill='%23FFD6C7'/%3E%3C/svg%3E")}
.mark.in{background-size:100% .42em}
@media(prefers-reduced-motion:reduce){.mark{background-size:100% .42em;transition:none}}

/* ---------- taches de couleur = spray radial (couleur au centre → blanc) ---------- */
.halo{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;z-index:0}
.blobsplash{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(38px);opacity:.55}

/* ---------- nav pilule ---------- */
/* menu transparent : le hero passe derrière, sans coupure de couleur */
.navbar{position:sticky;top:0;z-index:40;padding:18px 24px;display:flex;justify-content:center;background:transparent;transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .28s ease;will-change:transform}
/* masquée quand on descend, réaffichée dès qu'on remonte */
.navbar.nav-off{transform:translateY(-160%);opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.navbar{transition:none}.navbar.nav-off{transform:none;opacity:1;pointer-events:auto}}
@media(min-width:601px){.navbar.nav-off{transform:none;opacity:1;pointer-events:auto}} /* WP : menu toujours visible sur ordinateur */
.pill{position:relative;display:flex;align-items:center;gap:28px;background:#fff;border:1px solid var(--filet);border-radius:999px;padding:9px 9px 9px 26px;box-shadow:0 10px 30px rgba(214,0,127,.08)}
.logo{font-family:"Courgette","Segoe Script",cursive;font-weight:700;font-size:19px;letter-spacing:-.03em;position:relative}
.logo em{font-style:normal;color:var(--action)}
.pill nav{display:flex;gap:22px;font-size:14px;font-weight:500}
.pill nav a{text-decoration:none;opacity:.85}
.pill nav a:hover{opacity:1;color:var(--action)}
/* menu déroulant Prestations (pages services = pages SEO) */
.pill nav .has-drop{position:static}
.pill nav .drop-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.pill nav .drop-t .car{font-size:10px;transition:transform .2s}
.pill nav .has-drop:hover .drop-t .car,.pill nav .has-drop.open .drop-t .car{transform:rotate(180deg)}
.pill nav .mega{position:absolute;top:calc(100% + 10px);left:-64px;right:-64px;transform:translateY(8px);
  background:#fff;border:1px solid var(--filet);border-radius:28px;box-shadow:0 30px 70px rgba(14,10,16,.16);
  padding:24px;display:grid;grid-template-columns:200px 1fr;gap:18px;
  opacity:0;visibility:hidden;transition:opacity .22s,transform .22s;z-index:60}
.pill nav .mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.pill nav .has-drop.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-promo{background:linear-gradient(155deg,var(--wash-rose),var(--wash-bleu));border-radius:20px;padding:22px;display:flex;flex-direction:column;height:320px}
.mega-promo #megaDesc{min-height:76px}
#megaDetail{transition:opacity .18s ease,transform .18s ease;will-change:opacity,transform}
.mega-promo h4,.mega-promo .co-h4{font-family:"Courgette","Segoe Script",cursive;color:#000;font-size:25px;line-height:1.05;margin:8px 0 10px}
.mega-promo p{font-size:12.5px;line-height:1.55;opacity:.82}
.mega-promo .mega-cta{margin-top:auto;padding-top:16px;font-size:12px;font-weight:700;color:var(--action);display:inline-flex;gap:6px}
.mega-list{display:grid;width:100%;grid-template-columns:repeat(2,1fr);gap:6px 8px;align-content:center}
.mega-list a{display:flex;align-items:center;white-space:nowrap;padding:13px 11px;border-radius:14px;opacity:1;border:1px solid var(--filet);background:#fff;box-shadow:0 8px 22px rgba(14,10,16,.05);font-weight:700;font-size:14px;color:var(--noir);transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s}
.mega-list a:hover{background:var(--wash-rose);border-color:var(--action);color:var(--action);box-shadow:0 12px 26px rgba(214,0,127,.12);transform:translateY(-2px)}
.mega-ic{width:18px;height:18px;margin-right:8px;color:var(--action)}
.card-ic{width:44px;height:44px;color:var(--c);margin-bottom:16px}
.cardy-ic{width:36px;height:36px;color:var(--action);margin-bottom:4px}
/* ===== icônes services (SVG cliente, recolorables via mask) ===== */
.svc-ic{display:inline-block;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;vertical-align:middle;flex:0 0 auto}
.ic-secretariat{-webkit-mask-image:url("../img/ic-secretariat.svg");mask-image:url("../img/ic-secretariat.svg")}
.ic-facturation{-webkit-mask-image:url("../img/ic-facturation.svg");mask-image:url("../img/ic-facturation.svg")}
.ic-relances{-webkit-mask-image:url("../img/ic-relances.svg");mask-image:url("../img/ic-relances.svg")}
.ic-precompta{-webkit-mask-image:url("../img/ic-precompta.svg");mask-image:url("../img/ic-precompta.svg")}
.ic-organisation{-webkit-mask-image:url("../img/ic-organisation.svg");mask-image:url("../img/ic-organisation.svg")}
.ic-recrutement{-webkit-mask-image:url("../img/ic-recrutement.svg");mask-image:url("../img/ic-recrutement.svg")}
.ic-btp{-webkit-mask-image:url("../img/ic-btp.svg");mask-image:url("../img/ic-btp.svg")}
/* ===== icônes couleur (SVG cliente, couleurs d'origine conservées) ===== */
.ill{display:inline-block;background-repeat:no-repeat;background-position:center;background-size:contain;flex:0 0 auto}
.il-interlocutrice{background-image:url("../img/il-interlocutrice.svg")}
.il-confidentialite{background-image:url("../img/il-confidentialite.svg")}
.il-cadre{background-image:url("../img/il-cadre.svg")}
.il-envoye{background-image:url("../img/il-envoye.svg")}


/* ---------- boutons : le fond se déplie du bas au survol ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:13px 24px;font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid transparent;overflow:hidden;transition:color .2s;z-index:0}
.btn::before{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:#000000;z-index:-1;transition:height .28s cubic-bezier(.22,1,.36,1)}
.btn:hover::before{height:100%}
.btn:hover{color:#fff}
.btn-p{background:var(--action);color:#fff}
.btn-p::before{background:#000000}
.btn-s{background:#fff;color:var(--noir);border-color:var(--noir)}
.btn-s:hover{color:#fff}
.btn-s::before{background:#000000}

/* ---------- hero deux colonnes ---------- */
/* Le décor (sprays radiaux) remonte derrière le menu (top négatif) et se fond
   vers le bas (mask) : aucune coupure ni derrière le menu, ni sous les infos. */
/* pas d'overflow:hidden ici — il couperait net le décor et créerait une ligne.
   Le décor déborde vers le haut (derrière le menu) et se fond vers le bas ;
   le débordement horizontal est déjà maîtrisé par html/body overflow-x:clip. */
.hero{position:relative;padding:24px 0 75px}
.hero::before{content:"";position:absolute;left:-10%;right:-10%;top:-220px;bottom:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(44% 42% at 80% 36%, rgba(255,148,214,.55), transparent 66%),
    radial-gradient(42% 40% at 14% 52%, rgba(155,218,255,.48), transparent 66%),
    radial-gradient(36% 34% at 48% 26%, rgba(231,188,243,.46), transparent 68%),
    radial-gradient(30% 32% at 66% 76%, rgba(255,214,199,.42), transparent 70%);
  -webkit-mask:linear-gradient(transparent 2%, #000 26%, #000 66%, transparent 96%);
  mask:linear-gradient(transparent 2%, #000 26%, #000 66%, transparent 96%)}
.hero>.wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
.hero-l{position:relative;z-index:2}
.hero h1{margin:16px 0 0}
.lede{max-width:52ch;margin:22px 0 0;font-size:18px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero-visual{position:relative;z-index:2;width:100%}
.blob{border-radius:58% 42% 46% 54%/48% 52% 48% 52%;overflow:hidden;position:relative;z-index:2;box-shadow:0 30px 60px rgba(214,0,127,.13)}
.blob img{width:100%;filter:saturate(1.06)}
.blob::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,148,214,.10),rgba(155,218,255,.08))}
.sticker{position:absolute;z-index:3;background:#fff;border-radius:999px;padding:10px 18px;font-size:12px;font-weight:700;box-shadow:0 8px 24px rgba(14,10,16,.09);display:flex;align-items:center;gap:8px;white-space:nowrap}
.sticker .dot{width:8px;height:8px;border-radius:50%}
.st1{top:6%;left:-10%;transform:rotate(-6deg);animation:floatA 5.6s ease-in-out infinite}
.st2{top:46%;right:-9%;transform:rotate(5deg);animation:floatB 6.9s ease-in-out .7s infinite}
.st3{bottom:6%;left:-4%;transform:rotate(3deg);animation:floatC 6.2s ease-in-out .3s infinite}
@keyframes floatA{0%,100%{transform:rotate(-6deg) translate(0,0)}50%{transform:rotate(-5deg) translate(-6px,-13px)}}
@keyframes floatB{0%,100%{transform:rotate(5deg) translate(0,0)}50%{transform:rotate(6.5deg) translate(7px,10px)}}
@keyframes floatC{0%,100%{transform:rotate(3deg) translate(0,0)}50%{transform:rotate(1.5deg) translate(5px,-9px)}}

/* ---------- bandeau d'infos en bulles, sous le hero ---------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:64px 0 0}
.fact{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:22px 24px;box-shadow:0 10px 26px rgba(214,0,127,.06)}
.fact .v{font-family:"Courgette","Segoe Script",cursive;font-weight:700;font-size:22px;color:var(--action);line-height:1.05}
.fact .l{font-size:12px;margin-top:6px}

/* ---------- sections ---------- */
section{position:relative}
.sec{padding:75px 0}
/* RYTHME DES FONDS (parti pris UX) :
   - la couleur vive est réservée à deux moments — le hero (haut) et l'appel
     final (bas), qui encadrent la page ;
   - entre les deux, on alterne blanc et une teinte rose très douce pour
     séparer les sections et guider la lecture, sans surcharge.
   Pas de taches sur les blocs de contenu. */
.sec.alt{background:#FCEFF7}   /* bande teintée pleine largeur, très douce */
.sec-head{text-align:center;max-width:720px;margin:0 auto 52px}
.sec-head h2{margin-top:12px}
.sec-head p{margin-top:16px;font-size:18px}
.sec-cta{display:flex;justify-content:center;margin-top:44px}

/* douleurs */
.pains{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pain{border-radius:var(--r-m);padding:30px 28px;border:1px solid var(--filet);background:#fff;position:relative;overflow:hidden}
.pain .n{font-family:"Courgette","Segoe Script",cursive;font-size:24px;font-weight:700;color:var(--action);line-height:1}
.pain h3{margin:12px 0 10px}
.pain p{font-size:14px}

/* services : 4 puis 3 */
.cards{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;position:relative;z-index:1}
/* fiches blanches, nettes ; au survol, halo LED rose */
.card{--c:var(--action);grid-column:span 3;border-radius:var(--r-m);padding:28px 24px 24px;position:relative;
  background:#fff;border:1px solid var(--filet);box-shadow:0 8px 24px rgba(14,10,16,.05);
  transition:transform .22s,box-shadow .22s,border-color .22s;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;min-height:236px}
.card:nth-child(n+5){grid-column:span 4}
/* une couleur propre par fiche : le numéro la porte, et le néon du survol la reprend */
/* couleurs issues de la palette de marque (4 teintes, répétées) */
.card:nth-child(1){--c:var(--action)}
.card:nth-child(2){--c:var(--rose)}
.card:nth-child(3){--c:var(--bleu)}
.card:nth-child(4){--c:var(--lilas)}
.card:nth-child(5){--c:var(--action)}
.card:nth-child(6){--c:var(--rose)}
.card:nth-child(7){--c:var(--bleu)}
.card:hover{transform:translateY(-6px);border-color:transparent;
  box-shadow:0 0 0 1.5px var(--c),
             0 0 26px color-mix(in srgb, var(--c) 55%, transparent),
             0 18px 46px color-mix(in srgb, var(--c) 32%, transparent)}
.card .num{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--c);color:var(--c);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;margin-bottom:18px}
.card .go{color:#000000}
.card h3{margin-bottom:10px}
.card p{font-size:14px}
.card .go{margin-top:auto;padding-top:18px;font-size:12px;font-weight:700;color:#000000;display:flex;align-items:center;gap:6px}
.card:hover .go{gap:10px}

/* avis google */
.avis-top{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.avis-note{display:flex;align-items:baseline;gap:10px}
.avis-note .n{font-family:"Courgette","Segoe Script",cursive;font-weight:700;font-size:44px;color:var(--action);line-height:1}
.avis-note .stars{color:var(--action);letter-spacing:.12em;font-size:18px}
.avis-src{font-size:12px;font-weight:700}
.avis-note-sub{text-align:center;font-size:12px;margin-bottom:40px}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:26px 24px;box-shadow:0 8px 24px rgba(14,10,16,.05);display:flex;flex-direction:column}
.review .stars{color:var(--action);letter-spacing:.14em;font-size:15px}
.review blockquote{margin:14px 0 0;font-family:"Courgette","Segoe Script",cursive;font-size:16px;line-height:1.35}
.review .who{margin-top:auto;padding-top:20px;font-size:12px}
.review .who b{display:block;font-weight:700}

/* à propos — Camille détourée + avis intégrés autour d'elle */
.about{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:stretch}
.cam-figure{position:relative;display:block;min-height:420px}
/* photo détourée, flottante (pas de cadre), ombre portée + léger balancement — pleine hauteur des blocs */
.cam-cut{position:absolute;z-index:2;left:14%;bottom:0;height:100%;width:auto;max-width:120%;object-fit:contain;object-position:bottom left;
  filter:drop-shadow(0 26px 40px rgba(214,0,127,.22));animation:camfloat 7s ease-in-out infinite}
@keyframes camfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* badge note Google, posé sur la photo */
.gbadge{position:absolute;z-index:1;top:40px;left:4%;background:#fff;border-radius:22px;
  box-shadow:0 16px 40px rgba(14,10,16,.14);padding:18px 70px 18px 24px;display:flex;align-items:center;gap:14px;
  animation:gfloat 5.4s ease-in-out infinite}
@keyframes gfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.gbadge .g{width:36px;height:36px;border-radius:50%;background:conic-gradient(#EA4335,#FBBC05,#34A853,#4285F4,#EA4335);
  color:#fff;font-family:"Courgette","Segoe Script",cursive;font-weight:700;font-size:20px;display:flex;align-items:center;justify-content:center}
.gbadge b{font-family:"Courgette","Segoe Script",cursive;font-size:28px;line-height:1}
.gbadge .stars{color:#FBBC05;font-size:16px;letter-spacing:.06em;display:block}
.gbadge small{display:block;font-size:14px}
.about h2{margin:12px 0 18px}
.about p{margin-bottom:14px;font-size:18px}
.limits{background:#fff;border:1px dashed var(--action);border-radius:var(--r-s);padding:20px 22px;margin-top:22px}
.limits strong{display:block;margin-bottom:8px;font-size:14px}
.limits ul{margin:0;padding-left:18px;font-size:14px}
.limits li{margin-bottom:4px}
.about .btn{margin-top:26px}
/* avis en bulles de parole, sous la présentation (autre forme que des cartes) */
.cam-quotes{overflow:hidden;margin-top:58px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.quotes-track{display:flex;gap:18px;width:max-content;animation:quoteslide 30s linear infinite}
.cam-quotes:hover .quotes-track{animation-play-state:paused}
@keyframes quoteslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.qbubble{flex:0 0 340px;background:#fff;border:1px solid var(--filet);border-radius:22px 22px 22px 6px;padding:20px 22px;box-shadow:0 10px 26px rgba(14,10,16,.05);margin:0}
.qbubble .stars{color:var(--action);letter-spacing:.14em;font-size:14px}
.qbubble blockquote{margin:12px 0 0;font-family:"Courgette","Segoe Script",cursive;font-size:16px;line-height:1.35}
.qbubble figcaption{margin-top:14px;font-size:12px;font-weight:700}
.avis-mini{text-align:center;margin-top:22px;font-size:12px}

/* tarifs */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.price{border-radius:var(--r-m);border:1px solid var(--filet);background:#fff;padding:32px 26px;text-align:center;position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;display:flex;flex-direction:column;align-items:center}
.prices .price:hover{transform:scale(1.05);box-shadow:0 28px 54px rgba(14,10,16,.12);z-index:2}
.prices .price.reveal.in:hover{transform:scale(1.05)}
.price.feat:hover{box-shadow:0 30px 58px rgba(214,0,127,.24)}
.price:not(.feat):hover{box-shadow:0 26px 54px rgba(231,188,243,.95),0 10px 24px rgba(183,110,224,.4)}
/* vedette : spray rose intégré au fond (pas d'overflow → l'étiquette dépasse) */
.price.feat{border:2px solid var(--action);box-shadow:0 24px 46px rgba(214,0,127,.16);padding-top:40px;
  background:radial-gradient(72% 55% at 50% 0%, rgba(255,148,214,.5), #fff 62%)}
/* étiquette centrée, à cheval sur le bord haut (plus de découpe) */
.price .tag{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--action);color:#fff;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 16px;z-index:3;white-space:nowrap;box-shadow:0 8px 20px rgba(214,0,127,.28)}
.price .amount{width:100%;font-family:"Courgette","Segoe Script",cursive;font-size:44px;font-weight:700;letter-spacing:-.03em;margin:12px 0 8px;position:relative;z-index:2;color:var(--noir)}
.price.feat .amount{color:var(--action)}
.price p{width:100%;font-size:14px;position:relative;z-index:2}
.price .btn{margin-top:auto;position:relative;z-index:2}

/* faq */
.faq{max-width:none;margin:0}
details{background:#fff;border:1px solid var(--filet);border-radius:var(--r-s);padding:20px 24px;margin-bottom:12px}
details[open]{background:#fff;border-color:var(--bleu);box-shadow:0 12px 30px rgba(14,10,16,.06)}
summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;font-family:"Courgette","Segoe Script",cursive}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--action);font-size:24px;font-family:"DM Sans",sans-serif;line-height:1}
details[open] summary::after{content:"–"}
details[open] summary{color:var(--action)}
details p{margin-top:12px;font-size:18px}

/* CTA final : panneau à dégradé doux — le second moment coloré, en écho au hero */
.final{background:linear-gradient(135deg,#FFDDEE 0%,#F0E6FB 52%,#E4F2FF 100%);border-radius:var(--r-l);padding:84px 40px;text-align:center;position:relative;overflow:hidden}
.final h2{position:relative;z-index:2}
.final p{margin:16px auto 0;max-width:48ch;position:relative;z-index:2;font-size:18px}
.final .cta-row{justify-content:center;margin-top:30px;position:relative;z-index:2}

/* footer */
footer{padding:64px 0 40px}
.fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.fcols h4,.fcols .co-h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin:0 0 14px}
.fcols a{display:block;text-decoration:none;font-size:14px;margin-bottom:8px}
.fcols a:hover{color:var(--action)}
.legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--filet);font-size:12px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:40px}
  .hero-visual{width:min(520px,86vw);margin:0 auto}
  .cards{grid-template-columns:1fr 1fr}
  .card,.card:nth-child(n+5){grid-column:auto}
  .facts{grid-template-columns:1fr 1fr}
  .pains,.prices{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:36px}
  .cam-figure{min-height:0;display:flex;justify-content:center}
  .cam-cut{position:relative;left:auto;bottom:auto;height:auto;width:100%;max-width:360px}
  .cam-quotes{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr}
  .sec{padding:75px 0}
  .st1,.st2,.st3{transform:scale(.9)}
  .st1{left:-2%} .st2{right:-2%} .st3{left:2%}
}
@media(max-width:600px){
  .cards,.facts,.fcols{grid-template-columns:1fr}
  .pill nav{display:none}
  .cam-cut{max-width:300px}
  .gbadge{left:0;top:0}
}

/* ===================== SITE MULTI-PAGES ===================== */
/* === ROUTEUR DÉMONTÉ ==========================================================
   Chaque page est une URL WordPress. Règles neutralisées plutôt que supprimées ;
   l'animation d'entrée est reportée sur <main>. */
.route{display:block}
.co-main{animation:routein .45s cubic-bezier(.22,1,.36,1)}
@keyframes routein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
[data-go],[data-modal]{cursor:pointer}
.pill nav .nav-active{color:var(--action);opacity:1}
/* révélation au scroll */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
/* sous-hero pages intérieures */
/* le hero remonte derrière le menu (transparent) : sinon le dégradé est coupé net sous la barre */
.subhero{position:relative;margin-top:-107px;padding:185px 0 8px;text-align:center;overflow:hidden}
.subhero .wrap{position:relative;z-index:2}
.subhero .eyebrow{justify-content:center}
.subhero h1{font-size:clamp(36px,6vw,58px);margin:14px auto 0;max-width:17ch}
.subhero .lede{margin:20px auto 0;font-size:18px;max-width:60ch;line-height:1.55}
.subhero .cta-row{justify-content:center;margin-top:28px}
.subhero .meta{margin-top:18px;font-size:12px;opacity:.65;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.subhero .meta b{color:var(--action)}
.subhero::before{content:"";position:absolute;left:-10%;right:-10%;top:-170px;bottom:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 42% at 78% 32%,rgba(255,148,214,.5),transparent 66%),radial-gradient(42% 40% at 15% 42%,rgba(155,218,255,.45),transparent 66%),radial-gradient(34% 32% at 50% 14%,rgba(231,188,243,.42),transparent 68%);
  -webkit-mask:linear-gradient(#000 42%,transparent 94%);mask:linear-gradient(#000 42%,transparent 94%)}
.crumb{font-size:12px;opacity:.55;text-align:center;margin-top:10px}
.crumb b{color:var(--action);font-weight:700}
/* nom de marque écrit comme le logo : Cam noir + Office magenta */
.brandname em{font-style:normal;color:var(--action)}
.lead-2col{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* liste inclus */
ul.incl{display:grid;grid-template-columns:1fr 1fr;gap:14px 34px;padding:0;margin:0}
.incl li{list-style:none;display:flex;gap:12px;font-size:18px;align-items:flex-start;line-height:1.45}
.incl .ck{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--action);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:1px;box-shadow:0 4px 12px rgba(214,0,127,.25)}
/* étapes */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.step{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:24px 22px;transition:transform .22s,box-shadow .22s}
.step:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(214,0,127,.08)}
.step .n{font-family:"Courgette","Segoe Script",cursive;font-size:24px;color:var(--action);line-height:1}
.step h3{font-size:18px;margin:8px 0 8px}
.step p{font-size:14px}
/* pour qui / valeurs */
.tri{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tri .cardy{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:26px 24px;transition:transform .22s,box-shadow .22s}
.tri .cardy:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(14,10,16,.07)}
.tri .ic{font-size:26px}
.tri-ill{width:46px;height:46px;margin-bottom:10px}
.succ-ill{width:72px;height:72px;margin:0 auto 6px}
.tri h3{font-size:18px;margin:12px 0 6px}
.tri p{font-size:14px}
/* comparatif */
.ctable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;font-size:14px}
.ctable th,.ctable td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--filet)}
.ctable thead th{background:#FCEFF7;font-family:"Courgette","Segoe Script",cursive;font-size:18px;color:#000}
.ctable tbody tr:last-child td{border-bottom:0}
.ctable td.c{text-align:center;color:var(--action);font-weight:700}
.ctable td.x{text-align:center;opacity:.35}
/* comparatif tarifs : colonnes de largeur égale, tout aligné à gauche, valeurs en rose */
.ctable.cmp{table-layout:fixed}
.ctable.cmp th:first-child,.ctable.cmp td:first-child{width:34%}
.ctable.cmp th:not(:first-child),.ctable.cmp td:not(:first-child){width:33%}
.ctable.cmp td:not(:first-child){text-align:left;color:var(--action);font-weight:600}
.ctable.cmp td.c{text-align:left}
.ctable.cmp td.x{text-align:left;color:var(--noir);opacity:.3;font-weight:400}
/* bande de réassurance (page tarifs) */
.reass{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.reass .ri{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--filet);border-radius:var(--r-s);padding:16px 18px;transition:transform .22s,box-shadow .22s}
.reass .ri:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(214,0,127,.08)}
.reass .rk{flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--wash-rose);color:var(--action);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}
.reass b{display:block;font-size:14px;line-height:1.3}
.reass .t{display:block;font-size:12px;opacity:.7;margin-top:4px;line-height:1.45}
/* bande « toujours inclus » : Camille debout à gauche, pieds au ras du bas de la section */
.sec-camband{padding:30px 0 0;overflow:visible}
.camband{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:stretch}
.camband-fig{position:relative;align-self:stretch}
.camband-img{position:absolute;left:0;bottom:0;height:calc(100% + 88px);width:auto;max-width:none;
  filter:drop-shadow(0 18px 30px rgba(14,10,16,.14));pointer-events:none}
.camband-txt{padding:34px 0 46px}
.camband-txt h2{margin:10px 0 26px}
.camband .incl{grid-template-columns:1.4fr 1fr;gap:16px 26px}
@media(max-width:960px){
  .sec-camband{padding:0}
  .camband{grid-template-columns:1fr;gap:0}
  .camband-fig{position:static;height:auto;margin-top:-96px}
  .camband-img{position:static;height:auto;width:198px;margin:0 auto;display:block}
  .camband-txt{padding:14px 0 42px;text-align:center}
  .camband .incl{width:fit-content;margin:0 auto;grid-template-columns:1fr;text-align:left}
}
/* section à propos : la photo de Camille descend jusqu'au bord de la section suivante */
.sec-flush{padding-bottom:0}
.sec-flush .cam-figure{align-self:end;min-height:470px}
.sec-flush .about-txt{padding-bottom:50px}
.sec-flush .cam-cut{animation:none;left:50%;transform:translateX(-50%);bottom:0;height:100%;width:auto;max-width:none}
@media(max-width:960px){.sec-flush .cam-figure{min-height:400px}}
/* slider d'avis clients (3 par vue + pastilles) */
.rsl-view{overflow:hidden;padding:6px 0;margin:-6px 0}
.rsl-track{display:flex;transition:transform .55s cubic-bezier(.22,1,.36,1)}
.rsl-slide{flex:0 0 100%;display:grid;grid-template-columns:repeat(3,320px);justify-content:center;gap:20px}
.rsl-slide .review{margin:0;width:100%;box-shadow:none}
.rsl-dots{display:flex;gap:9px;justify-content:center;margin-top:26px}
.rsl-dots button{width:10px;height:10px;padding:0;border:0;border-radius:999px;background:var(--filet);cursor:pointer;transition:width .25s,background .25s}
.rsl-dots button:hover{background:var(--rose)}
.rsl-dots button.on{width:28px;background:var(--action)}
/* blog */
.blog-feat{display:grid;grid-template-columns:1.05fr .95fr;border:1px solid var(--filet);border-radius:var(--r-l);overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(14,10,16,.05);margin-bottom:16px;text-decoration:none;color:inherit;transition:box-shadow .22s}
.blog-feat:hover{box-shadow:0 22px 50px rgba(214,0,127,.12)}
.blog-feat .cover{min-height:300px}
.blog-feat .body{padding:38px}
.blog-feat .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--action)}
.blog-feat h3{font-size:28px;margin:12px 0 12px}
.blog-feat p{font-size:18px}
.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:4px 0 30px}
.filter{border:1px solid var(--filet);background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;transition:.2s}
.filter:hover,.filter.on{background:var(--action);color:#fff;border-color:var(--action)}
.bloggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.post{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .22s,box-shadow .22s}
.post:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(14,10,16,.08)}
.post .cover{height:152px}
.post .body{padding:20px 22px;display:flex;flex-direction:column;flex:1}
.post .tag{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--action)}
.post h3{font-size:18px;margin:8px 0 8px;line-height:1.15}
.post p{font-size:14px;flex:1}
.post .rd{margin-top:14px;font-size:12px;opacity:.6}
.cov1{background:linear-gradient(135deg,var(--rose),var(--lilas))}
.cov2{background:linear-gradient(135deg,var(--bleu),var(--lilas))}
.cov3{background:linear-gradient(135deg,var(--peche),var(--rose))}
.cov4{background:linear-gradient(135deg,var(--lilas),var(--bleu))}
.cov5{background:linear-gradient(135deg,var(--rose),var(--bleu))}
.cov6{background:linear-gradient(135deg,var(--peche),var(--lilas))}
/* article */
.article{display:grid;grid-template-columns:.28fr 1fr;gap:46px;align-items:start}
.toc{position:sticky;top:112px;font-size:12px}
.toc h4,.toc .co-h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--action);margin:0 0 12px}
.toc a{display:block;padding:6px 0 6px 12px;text-decoration:none;opacity:.7;border-left:2px solid var(--filet)}
.toc a:hover{opacity:1;color:var(--action);border-color:var(--action)}
.article-cover{height:300px;border-radius:var(--r-l);margin-bottom:38px}
.prose h2{font-size:30px;margin:36px 0 14px}
.prose h3{font-size:20px;margin:26px 0 10px}
.prose p{font-size:18px;margin-bottom:16px;line-height:1.7}
.prose ul{font-size:18px;margin:0 0 16px;padding-left:20px}
.prose li{margin-bottom:6px}
.callout{background:var(--wash-bleu);border-left:4px solid var(--bleu);border-radius:12px;padding:18px 22px;margin:24px 0;font-size:18px}
.author{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:20px 22px;margin-top:40px}
.author img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:top center;background:var(--wash-rose)}
.author b{display:block;font-size:15px}
.author span{font-size:12px;opacity:.7}
/* timeline parcours */
.tl{position:relative;max-width:760px;margin:0 auto;padding-left:84px}
.tl-thread{position:absolute;left:0;top:0;width:84px;height:100%;pointer-events:none;z-index:0}
.tl-thread svg{display:block;width:100%;height:100%}
.tl-thread path{fill:none;stroke:var(--action);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;stroke-dasharray:var(--len,2000);stroke-dashoffset:var(--off,2000)}
.tl-thread path.ghost{stroke:var(--rose);opacity:.32;stroke-width:5;stroke-dasharray:none;stroke-dashoffset:0}
.tl-item{position:relative;display:grid;grid-template-columns:120px 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--filet)}
/* perle du fil, en face de chaque étape */
.tl-item::before{content:"";position:absolute;left:-46px;top:30px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2.6px solid var(--action);transform:scale(.5);opacity:0;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .35s;z-index:2}
.tl-item.lit::before{transform:scale(1);opacity:1;box-shadow:0 0 0 6px rgba(214,0,127,.10)}
.tl-item:last-child{border-bottom:0}
@media(prefers-reduced-motion:reduce){.tl-thread path{stroke-dashoffset:0!important}.tl-item::before{opacity:1;transform:scale(1)}}
.tl-item .yr{font-family:"Courgette","Segoe Script",cursive;color:var(--action);font-size:24px}
.tl-item h3{font-size:18px;margin:0 0 6px}
.tl-item p{font-size:14px}
/* contact */
.contact-grid{display:grid;grid-template-columns:1fr .82fr;gap:46px;align-items:start}
.rea{display:flex;gap:14px;align-items:flex-start;margin-bottom:20px}
.rea .ic{flex:0 0 44px;width:44px;height:44px;border-radius:14px;background:var(--wash-rose);color:var(--action);display:flex;align-items:center;justify-content:center;font-size:18px}
.rea b{display:block;font-size:15px;margin-bottom:2px}
.rea span{font-size:14px;opacity:.75}
.contact-card{background:#fff;border:1px solid var(--filet);border-radius:var(--r-l);padding:34px;box-shadow:0 14px 36px rgba(14,10,16,.06);text-align:center}
.contact-card .big{font-size:46px}
/* ===================== PAGE PRESTATION — hero distinct + blocs ===================== */
.phero2{background:linear-gradient(160deg,var(--wash-rose) 0%,#fff 46%,var(--wash-bleu) 100%);margin-top:-107px;padding:161px 0 64px;border-bottom:1px solid var(--filet)}
.phero2-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:46px;align-items:center}
.phero2 h1{font-size:clamp(36px,6vw,58px);margin:0 0 14px;line-height:1.05}
.phero2 .lead-hero{font-size:20px;line-height:1.5;font-weight:600;color:var(--noir);margin:0 0 14px;max-width:52ch}
.phero2 .rep{font-size:18px;line-height:1.6;max-width:54ch;opacity:.82}
.phero2 .links{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
/* timeline "comment ça se passe" */
.ptl{position:relative;max-width:760px;margin:0 auto;padding-left:64px}
.ptl::before{content:"";position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--rose),var(--bleu));transform:scaleY(0);transform-origin:top;transition:transform 1.05s cubic-bezier(.22,1,.36,1) .12s}
.ptl.in::before{transform:scaleY(1)}
.ptl-item{position:relative;padding:0 0 34px}
.ptl-item:last-child{padding-bottom:0}
.ptl-item .dot{position:absolute;left:-64px;top:-2px;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--rose);display:flex;align-items:center;justify-content:center;font-family:"Courgette","Segoe Script",cursive;color:var(--action);font-size:24px;box-shadow:0 6px 18px rgba(214,0,127,.12)}
.ptl-item h3{font-size:18px;margin:0 0 6px}
.ptl-item p{font-size:14px;line-height:1.55;max-width:60ch}
/* hero page tarifs — distinct : teaser des 3 formules qui flottent */
.thero{position:relative;overflow:hidden;text-align:center;margin-top:-107px;padding:132px 0 30px;background:radial-gradient(58% 68% at 50% 4%,var(--wash-bleu),transparent 70%),linear-gradient(180deg,var(--wash-rose),#fff 60%)}
/* pas de filet entre le hero et les prix, et prix remontés au-dessus de la ligne de flottaison */
.thero + .sec{padding-top:34px}
.thero .wrap{position:relative;z-index:2}
.thero h1{font-size:clamp(36px,6vw,58px);margin:12px auto 0;max-width:30ch;line-height:1.05}
.thero .lede{margin:18px auto 0;font-size:18px;max-width:56ch;line-height:1.55;opacity:.85}
.thero-chips{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.tchip{background:#fff;border:1px solid var(--filet);border-radius:20px;padding:16px 26px;min-width:150px;box-shadow:0 16px 38px rgba(214,0,127,.12);animation:tfloat 6s ease-in-out infinite}
.tchip:nth-child(2){animation-delay:-2s}
.tchip:nth-child(3){animation-delay:-3.6s}
.tchip .a{display:block;font-family:"Courgette","Segoe Script",cursive;color:var(--action);font-size:26px;line-height:1}
.tchip .l{display:block;margin-top:6px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;opacity:.6;font-weight:700}
@keyframes tfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.tchip{animation:none}}
.qcard{background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:26px 28px;box-shadow:0 18px 44px rgba(214,0,127,.10)}
.qcard .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--action);font-weight:700}
.qcard .who{font-family:"Courgette","Segoe Script",cursive;color:#000;font-size:22px;margin:6px 0 16px;line-height:1.05}
.qfacts div{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--filet);padding:11px 0;font-size:14px}
.qfacts b{color:var(--action);font-weight:700}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.titem{display:flex;gap:16px;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:22px 24px}
.titem .n{font-family:"Courgette","Segoe Script",cursive;color:var(--action);font-size:24px;line-height:1;flex:0 0 auto}
.titem h3{font-size:18px;margin:0 0 6px}
.titem p{font-size:14px}
.hpanel{background:linear-gradient(135deg,#FFDDEE 0%,#F0E6FB 52%,#E4F2FF 100%);border-radius:var(--r-l);padding:46px 44px}
.hpanel .k{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--action);font-weight:700}
.hpanel h2{font-size:clamp(22px,2.5vw,32px);margin:14px 0 12px;max-width:26ch}
.hpanel p{font-size:18px;max-width:62ch}
.after-tbl{margin-top:16px;font-size:14px}
.after-tbl a{color:var(--action);font-weight:700;text-decoration:none}
.after-tbl a:hover{text-decoration:underline}
/* ===================== MODAL MULTI-ÉTAPES ===================== */
.modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(14,10,16,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .25s}
.modal-backdrop.open{opacity:1;visibility:visible}
.modal{background:#fff;border-radius:var(--r-l);width:min(620px,100%);max-height:92vh;overflow:auto;padding:34px;position:relative;transform:translateY(18px) scale(.98);transition:transform .32s cubic-bezier(.22,1,.36,1)}
.modal-backdrop.open .modal{transform:none}
.modal .x{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;border:1px solid var(--filet);background:#fff;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:.18s}
.modal .x:hover{background:var(--wash-rose);color:var(--action)}
.mbar{display:flex;gap:6px;margin:2px 40px 24px 0}
.mbar span{flex:1;height:6px;border-radius:999px;background:var(--filet);transition:background .3s}
.mbar span.on{background:var(--action)}
.mstep{display:none}
.mstep.active{display:block;animation:routein .32s ease}
.mstep .eyebrow{justify-content:flex-start}
.mstep h3{font-size:26px;margin:8px 0 6px}
.mstep .sub{font-size:14px;opacity:.7;margin-bottom:18px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1.5px solid var(--filet);background:#fff;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:.18s;user-select:none}
.chip:hover{border-color:var(--action)}
.chip.sel{background:var(--action);color:#fff;border-color:var(--action)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;margin-bottom:6px}
.field input,.field textarea{width:100%;border:1.5px solid var(--filet);border-radius:14px;padding:12px 16px;font:inherit;font-size:15px;background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--action)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mnav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.mnav .btn{font-size:13.5px}
.mghost{background:none;border:none;color:var(--noir);opacity:.6;font-weight:700;cursor:pointer;font:inherit;font-size:13.5px}
.mghost:hover{opacity:1;color:var(--action)}
.msucc{text-align:center;padding:14px 0}
.msucc .big{font-size:56px}
.msucc h3{font-size:26px;margin:10px 0}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .co-main,.mstep.active,.modal-backdrop.open .modal{animation:none}
  .sticker,.cam-cut,.gbadge,.quotes-track{animation:none!important}
}
@media(max-width:1060px){
  .rsl-slide{grid-template-columns:repeat(2,320px)}
}
@media(max-width:960px){
  .lead-2col,.blog-feat,.article,.contact-grid{grid-template-columns:1fr}
  ul.incl,.tri,.steps,.reass{grid-template-columns:1fr 1fr}
  .bloggrid{grid-template-columns:1fr 1fr}
  .toc{position:static;margin-bottom:24px}
  .blog-feat .cover{min-height:200px}
}
@media(max-width:600px){
  ul.incl,.tri,.steps,.bloggrid,.frow,.reass{grid-template-columns:1fr}
  .rsl-slide{grid-template-columns:minmax(0,320px)}
  .tl{padding-left:52px}
  .tl-thread{width:52px}
  .tl-item{grid-template-columns:1fr;gap:4px}
  .tl-item::before{left:-32px;top:26px}
}


/* =============================================================================
   ADAPTATIONS WORDPRESS
   Absent de la maquette. Aucune de ces règles ne modifie un élément visible de
   la maquette au-dessus de 600 px, sauf mention contraire.
   ============================================================================= */

/* ---- lien d'évitement, masquage accessible, pot de miel ---- */
.co-skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--noir);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-s) 0;font-size:14px;font-weight:700;text-decoration:none}
.co-skip:focus{left:0}
.co-sr,.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.co-hp{position:absolute!important;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- focus visible (l'outline n'est pas supprimé, il est stylé) ---- */
:focus-visible{outline:2px solid var(--action);outline-offset:3px;border-radius:6px}
.btn:focus-visible{border-radius:999px}

/* ---- éléments devenus liens ou boutons : même rendu que la maquette ---- */
a.logo{text-decoration:none}
/* ---- logo image (remplace le logo texte de la maquette) ---- */
.logo-a{display:block;line-height:0;flex:0 0 auto}
.logo-a .logo-img{display:block;height:68px;width:auto;max-width:none;margin:-8.5px -6px -8.5px -16px}
.logo-pied .logo-img{height:150px;margin:-18px 0 -10px -22px}
@media(max-width:600px){.logo-a:not(.logo-pied) .logo-img{height:57px;margin:-7.5px -4px -7.5px -12px}}
.crumb a{color:inherit;text-decoration:none}
.co-lien-muet{color:inherit;text-decoration:none}
button.chip{font:inherit;font-size:14px;font-weight:600;line-height:inherit;color:inherit;text-align:left}
button.chip.sel{color:#fff}
.co-form{margin:0}
.co-erreur{margin:16px 0 0;font-size:14px;font-weight:700;color:var(--action)}
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* ---- images sorties du base64 : elles portent width/height (anti-CLS) ---- */
.blob img{height:auto}

/* ---- menu mobile — ABSENT DE LA MAQUETTE, visible sous 600 px uniquement ----
   Pilule du haut : logo + bouton menu. Tiroir : ouvert juste sous la pilule
   (position calculée en JS dans --co-tiroir-top). Bouton de contact : barre
   collante en bas d'écran. */
.co-burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--filet);background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;flex:0 0 auto}
.co-burger i{display:block;width:16px;height:2px;border-radius:2px;background:var(--noir);transition:transform .22s,opacity .18s}
.co-tiroir-ouvert .co-burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.co-tiroir-ouvert .co-burger i:nth-child(2){opacity:0}
.co-tiroir-ouvert .co-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.co-tiroir{position:fixed;left:12px;right:12px;top:var(--co-tiroir-top,84px);z-index:39;background:#fff;border:1px solid var(--filet);border-radius:28px;box-shadow:0 30px 70px rgba(14,10,16,.16);padding:18px;max-height:calc(100vh - var(--co-tiroir-top,84px) - var(--co-barre-h,0px) - 16px);max-height:calc(100dvh - var(--co-tiroir-top,84px) - var(--co-barre-h,0px) - 16px);overflow:auto;overscroll-behavior:contain}
.co-tiroir .mega-list{grid-template-columns:1fr}
.co-tiroir .mega-list a{text-decoration:none}
.co-barre-mobile{display:none}
@media(max-width:600px){
  .co-burger{display:flex}
  .navbar{padding:12px}
  .pill{width:100%;justify-content:space-between;gap:12px;padding:8px 8px 8px 22px}
  .pill .co-cta-haut{display:none}
  .co-barre-mobile{display:block;position:fixed;left:0;right:0;bottom:0;z-index:45;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,rgba(255,255,255,.96) 60%,rgba(255,255,255,0));pointer-events:none}
  .co-barre-mobile .btn{pointer-events:auto;width:100%;justify-content:center;box-shadow:0 10px 30px rgba(214,0,127,.25)}
  body{--co-barre-h:72px;padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
}
@media(min-width:601px){.co-tiroir{display:none!important}}

/* ---- recherche, pagination, commentaires ---- */
.co-search{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.co-search input[type="search"]{min-width:260px;border:1.5px solid var(--filet);border-radius:999px;padding:12px 18px;font:inherit;font-size:15px;background:#fff}
.co-search input[type="search"]:focus{outline:none;border-color:var(--action)}
.co-pagination{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.co-pagination a,.co-pagination span{border:1px solid var(--filet);background:#fff;border-radius:999px;padding:8px 16px;font-size:13px;font-weight:700;text-decoration:none}
.co-pagination .current{background:var(--action);color:#fff;border-color:var(--action)}
.co-comments textarea,.co-comments input[type="text"],.co-comments input[type="email"],.co-comments input[type="url"]{width:100%;border:1.5px solid var(--filet);border-radius:14px;padding:12px 16px;font:inherit;background:#fff}

/* ---- classes imposées par WordPress ---- */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignwide,.alignfull{max-width:100%}
.wp-caption{max-width:100%}
.wp-caption-text,.gallery-caption{font-size:14px;margin-top:8px;opacity:.75}
.sticky,.bypostauthor{display:block}
.prose img,.prose figure{border-radius:var(--r-m)}
/* étiquettes d'interface (méga-menu, sommaire, colonnes du pied) : rendu d'un h4,
   sans être un titre de contenu — la hiérarchie des titres reste h1 > h2 > h3. */
.co-h4{display:block;font-weight:700;text-wrap:balance}
/* ---- articles rédigés : éléments absents de l'article de la maquette ---- */
.prose a{color:var(--action);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{text-decoration-thickness:2px}
.prose ol{font-size:18px;margin:0 0 16px;padding-left:22px}
.prose li>ul,.prose li>ol{margin:6px 0 0}
.prose .co-tableau{overflow-x:auto;margin:22px 0}
.prose table{width:100%;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.5;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--filet)}
.prose th{font-weight:700;background:var(--wash-bleu)}
.prose tr:last-child td{border-bottom:0}
.prose .callout p:last-child,.prose .callout ul:last-child{margin-bottom:0}
.co-callout-service a{font-weight:700}

/* ---- images à la une des articles (le dégradé reste le fond au chargement) ---- */
.co-couverture{position:relative;overflow:hidden}
.co-couverture-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- photo détourée de la section « À propos » : jamais sur le texte ----
   La maquette laisse la photo déborder largement (max-width:120%) ; cela ne se
   voyait pas parce que son image détourée porte 21 % de vide à droite. Une photo
   cadrée au plus près, elle, recouvrait le texte. La largeur est donc bornée à
   la colonne + la gouttière : le débordement reste dans le vide entre les deux
   colonnes. Au-dessus de 1000 px seulement ; en dessous, la mise en page passe
   sur une colonne et garde la règle de la maquette. */
@media(min-width:1001px){
  .about .cam-cut{max-width:calc(86% + 56px)}
}

/* ---- partenaires — ABSENT DE LA MAQUETTE, composé avec ses tokens ---- */
.co-parts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.co-part{display:flex;flex-direction:column;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);overflow:hidden;text-decoration:none;transition:transform .22s,box-shadow .22s}
.co-part:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(14,10,16,.07)}
.co-part-media{display:flex;align-items:center;justify-content:center;height:150px;padding:26px 30px;background:linear-gradient(155deg,var(--wash-rose),var(--wash-bleu))}
.co-part-logo{display:block;max-width:100%;max-height:96px;width:auto;height:auto;object-fit:contain}
.co-part-initiales{display:flex;align-items:center;justify-content:center;width:84px;height:84px;border-radius:50%;background:#fff;font-family:"Courgette","Segoe Script",cursive;font-size:30px;color:var(--action)}
.co-part-corps{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.co-part h3{font-size:20px}
.co-part-meta{font-size:14px;opacity:.75}
.co-part .go{margin-top:auto;padding-top:8px;font-size:14px;font-weight:700;color:var(--action)}
.co-fiche{position:sticky;top:112px;background:#fff;border:1px solid var(--filet);border-radius:var(--r-m);padding:20px;font-size:14px;display:flex;flex-direction:column;gap:6px}
.co-fiche-logo{display:flex;align-items:center;justify-content:center;height:120px;padding:16px;margin-bottom:8px;border-radius:12px;background:linear-gradient(155deg,var(--wash-rose),var(--wash-bleu))}
.co-fiche .co-h4{font-size:16px}
.co-fiche p{opacity:.75}
.co-fiche .btn{margin-top:10px;justify-content:center;text-align:center}
.subhero .crumb{margin:0 0 12px}
.subhero .crumb a{color:inherit}
@media(max-width:1000px){.co-parts{grid-template-columns:repeat(2,1fr)}.co-fiche{position:static;margin-bottom:24px}}
@media(max-width:600px){.co-parts{grid-template-columns:1fr}}

/* ---- barre d'administration ---- */
body.admin-bar .navbar{top:32px}
@media(max-width:782px){body.admin-bar .navbar{top:46px}}