/* ============================================================
   EDMÉE COV — MAQUETTE DES PAGES INTÉRIEURES
   Chargé par : services, portfolio, blog, contact, mentions, CGV.
   Toutes ces pages partagent la même ossature :
     bandeau de titre → sections → bande CTA → pied de page.
   L'accueil, lui, garde son écriture propre (styles/accueil.css).
   ============================================================ */

/* Les pages intérieures ont une nav fixe : on décale le contenu */
.page{ padding-top:var(--nav-h); }

/* ============================================================
   Bandeau de titre
   ============================================================ */
.pagehead{
  position:relative; overflow:hidden;
  padding:clamp(46px,6vw,84px) 0 clamp(52px,6.5vw,90px);
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(242,208,216,.42), transparent 60%),
    radial-gradient(90% 100% at 4% 100%, rgba(27,95,168,.13), transparent 62%),
    linear-gradient(170deg, #FFFFFF 0%, var(--ice) 100%);
  border-bottom:1px solid var(--mist);
}
.pagehead .waveTexture{ opacity:.7; -webkit-mask-image:none; mask-image:none; }
.pagehead__wave{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:auto; }
.pagehead__wave .a{ fill:rgba(27,95,168,.09); }
.pagehead__wave .b{ fill:rgba(11,35,66,.06); }
.pagehead__inner{ position:relative; z-index:2; max-width:800px; }

.breadcrumb{
  display:flex; align-items:center; gap:.6em; flex-wrap:wrap;
  font-size:.76rem; color:var(--slate); margin-bottom:20px;
}
.breadcrumb a{ transition:color .35s var(--ease); }
.breadcrumb a:hover{ color:var(--ruby); }
.breadcrumb span{ color:var(--mist); }
.breadcrumb strong{ font-weight:600; color:var(--navy); }

.pagehead h1{
  font-size:clamp(2.2rem,5.2vw,3.9rem); margin-top:14px; letter-spacing:-.025em;
}
.pagehead h1 em{ font-style:italic; color:var(--blue); }
.pagehead__lede{
  margin-top:20px; font-size:clamp(1rem,1.4vw,1.14rem); color:var(--slate); max-width:62ch;
}
.pagehead__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* Sommaire de page (ancres) */
.anchors{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; position:relative; z-index:2;
}
.anchors a{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.55em 1.05em; border-radius:100px;
  background:rgba(255,255,255,.8); border:1px solid var(--mist);
  font-size:.8rem; font-weight:500; color:var(--navy);
  transition:border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.anchors a::before{
  content:''; width:5px; height:5px; border-radius:50%; background:var(--ruby); flex:none;
}
.anchors a:hover{ border-color:var(--ruby); color:var(--ruby); transform:translateY(-2px); }

/* ============================================================
   Sections génériques
   ============================================================ */
.sec{ position:relative; overflow:hidden; padding:clamp(48px,6.2vw,84px) 0; }
.sec--ice{ background:var(--ice); }
.sec--cream{ background:var(--cream); }
.sec--white{ background:#fff; }
.sec--navy{ background:var(--navy); color:#fff; }
.sec--navy .eyebrow{ color:var(--blush); }
.sec--navy .eyebrow::before{ background:linear-gradient(90deg,transparent,var(--blush)); }
.sec--navy .sec__lede{ color:#B9C8DA; }
.sec--navy .waveTexture{
  opacity:.9;
  background-image:
    repeating-radial-gradient(circle at 10% 120%, transparent 0 62px, rgba(255,255,255,.055) 62px 63px),
    repeating-radial-gradient(circle at 88% -12%, transparent 0 80px, rgba(242,208,216,.06) 80px 81px);
}
.sec__inner{ position:relative; z-index:2; }
.sec__head{ max-width:680px; }
.sec__head h2{ font-size:clamp(1.7rem,3.4vw,2.6rem); margin-top:14px; }
.sec__head h2 em{ font-style:italic; color:var(--blue); }
.sec--navy .sec__head h2 em{ color:var(--blush); }
.sec__lede{ margin-top:16px; color:var(--slate); font-size:1rem; }

/* ============================================================
   Bloc détaillé d'un service (cible d'ancre)
   ============================================================ */
.svc{
  position:relative; scroll-margin-top:calc(var(--nav-h) + 24px);
  display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,60px);
  align-items:start;
  background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,44px);
  box-shadow:var(--shadow-soft);
  transition:box-shadow .6s var(--ease), border-color .6s var(--ease);
}
.svc + .svc{ margin-top:clamp(20px,2.6vw,32px); }
.svc:hover{ box-shadow:var(--shadow-lift); border-color:#c9d8ec; }
.svc__side{ position:relative; }
.svc__num{
  font-family:var(--serif); font-size:.82rem; letter-spacing:.22em; color:var(--ruby); display:block;
}
.svc__ico{
  width:60px; height:60px; border-radius:18px; display:grid; place-items:center; margin-top:18px;
  background:linear-gradient(150deg, var(--ice), #fff);
  border:1px solid var(--mist); color:var(--blue);
}
.svc__ico svg{ width:28px; height:28px; }
.svc h3{ font-size:clamp(1.4rem,2.3vw,1.9rem); margin-top:18px; }
.svc__pitch{ margin-top:14px; color:var(--slate); font-size:.98rem; }
.svc__meta{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--mist);
  display:grid; gap:10px; font-size:.83rem;
}
.svc__meta div{ display:flex; gap:10px; align-items:baseline; }
.svc__meta dt{ flex:none; width:88px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; font-size:.68rem; color:var(--ruby); }
.svc__meta dd{ margin:0; color:var(--navy); }

.svc__body h4{
  font-family:var(--sans); font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--navy); margin-bottom:12px;
}
.svc__body h4 + ul{ margin-bottom:26px; }
.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.92rem; padding:9px 0; border-top:1px solid var(--mist);
}
.checklist li:first-child{ border-top:0; }
.checklist li::before{
  content:''; flex:none; width:6px; height:6px; margin-top:9px; border-radius:50%;
  background:var(--ruby); box-shadow:0 0 0 4px var(--blush);
}

/* ============================================================
   Tarifs
   ============================================================ */
.tarifs{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.2vw,40px); }
.tarif{
  position:relative; background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,34px); box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
  display:flex; flex-direction:column;
}
.tarif:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:#c9d8ec; }
.tarif--phare{ border-color:var(--blush); }
.tarif__flag{
  position:absolute; top:-11px; left:clamp(24px,2.6vw,34px);
  background:var(--ruby); color:#fff; border-radius:100px; padding:.32em 1em;
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.tarif h3{ font-family:var(--sans); font-size:1.05rem; font-weight:600; letter-spacing:.01em; }
.tarif__prix{
  font-family:var(--serif); font-size:clamp(1.9rem,3vw,2.5rem); font-weight:500;
  margin-top:12px; display:block; color:var(--navy);
}
.tarif__prix small{ font-family:var(--sans); font-size:.8rem; font-weight:500; color:var(--slate); letter-spacing:.02em; }
.tarif__desc{ margin-top:12px; font-size:.9rem; color:var(--slate); }
.tarif .checklist{ margin-top:20px; }
.tarif .checklist li{ font-size:.86rem; }
/* L'espace au-dessus du bouton est porté par le bloc qui précède, pour que
   margin-top:auto puisse caler le bouton en bas des trois cartes. */
.tarif .checklist{ margin-bottom:26px; }
.tarif .btn{ width:100%; justify-content:center; margin-top:auto; }
.tarifs__note{ margin-top:22px; font-size:.84rem; color:var(--slate); }

/* ============================================================
   Méthode — frise verticale (différente de l'accueil)
   ============================================================ */
.timeline{ position:relative; margin-top:clamp(26px,3.4vw,42px); padding-left:34px; }
.timeline::before{
  content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,var(--blue),var(--ruby),transparent);
}
.tl{ position:relative; padding:0 0 clamp(24px,3vw,38px); }
.tl:last-child{ padding-bottom:0; }
.tl::before{
  content:''; position:absolute; left:-34px; top:5px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; border:2px solid var(--blue);
  box-shadow:0 0 0 5px var(--cream);
}
.tl:last-child::before{ border-color:var(--ruby); }
.tl span{ font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--ruby); }
.tl h3{ font-family:var(--sans); font-size:1.1rem; font-weight:600; margin-top:8px; }
.tl p{ margin-top:8px; color:var(--slate); font-size:.94rem; max-width:62ch; }
.tl__tag{
  display:inline-block; margin-top:12px; padding:.35em .9em; border-radius:100px;
  background:var(--ice); border:1px solid var(--mist);
  font-size:.72rem; font-weight:600; letter-spacing:.06em; color:var(--blue);
}

/* ============================================================
   Portfolio — vidéos et documents
   ============================================================ */
.works{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.2vw,40px); }
.work{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:#fff; border:1px solid var(--mist); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.work:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--blush); }
.work__vignette{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--navy); }
.work__vignette img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.work:hover .work__vignette img{ transform:scale(1.06); }
.work__type{
  position:absolute; top:12px; left:12px; z-index:2;
  display:inline-flex; align-items:center; gap:.5em;
  padding:.35em .85em; border-radius:100px;
  background:rgba(11,35,66,.72); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:.64rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.work__play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:2;
  transition:background .5s var(--ease);
}
.work__play i{
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.9); color:var(--ruby);
  transition:transform .5s var(--ease);
}
.work:hover .work__play i{ transform:scale(1.1); }
.work__play svg{ width:20px; height:20px; margin-left:3px; }
.work__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.work h3{ font-size:1.15rem; }
.work p{ margin-top:10px; font-size:.9rem; color:var(--slate); flex:1; }
.work__foot{
  margin-top:18px; padding-top:14px; border-top:1px solid var(--mist);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:.76rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--slate);
  transition:color .4s var(--ease);
}
.work:hover .work__foot{ color:var(--ruby); }

/* ============================================================
   Avis clients
   ============================================================ */
.avis{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.2vw,40px); }
.avis figure{
  margin:0; background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(24px,2.8vw,36px); box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.avis figure:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--blush); }
.avis blockquote{ margin:0; font-family:var(--serif); font-style:italic; font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.5; }
.avis__note{ display:flex; gap:3px; margin-bottom:14px; color:var(--ruby); }
.avis__note svg{ width:15px; height:15px; }
.avis figcaption{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--mist);
  display:flex; align-items:center; gap:14px;
}
.avis__ini{
  flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--ice); color:var(--blue); font-weight:700; font-size:.86rem; letter-spacing:.04em;
}
.avis__qui strong{ display:block; font-size:.92rem; font-weight:600; }
.avis__qui span{ display:block; font-size:.78rem; color:var(--slate); }

/* ============================================================
   Blog — articles et ressources
   ============================================================ */
.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.2vw,40px); }
.post{
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg); box-shadow:var(--shadow-soft);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.post:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--blush); }
.post__vignette{ aspect-ratio:16/9; overflow:hidden; }
.post__vignette img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.post:hover .post__vignette img{ transform:scale(1.06); }
.post__body{ padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.post__meta{ display:flex; gap:.7em; align-items:center; font-size:.68rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ruby); }
.post__meta time{ color:var(--slate); letter-spacing:.08em; }
.post h3{ font-size:1.2rem; margin-top:12px; }
.post p{ margin-top:10px; font-size:.9rem; color:var(--slate); flex:1; }
.post__more{
  margin-top:18px; display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy);
  transition:color .4s var(--ease), gap .4s var(--ease);
}
.post:hover .post__more{ color:var(--ruby); gap:.9em; }

/* Ressources offertes (lead magnets) */
.magnets{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-top:clamp(26px,3.2vw,40px); }
.magnet{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg, #fff, var(--ice));
  border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.magnet:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--blush); }
.magnet__ico{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--mist); color:var(--ruby);
}
.magnet__ico svg{ width:22px; height:22px; }
.magnet h3{ font-size:1.12rem; margin-top:18px; }
.magnet p{ margin-top:10px; font-size:.88rem; color:var(--slate); flex:1; }
.magnet__format{
  margin-top:16px; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue);
}
.magnet .btn{ margin-top:20px; width:100%; justify-content:center; }

/* ============================================================
   Article de blog — corps de texte
   ============================================================ */
.article{ max-width:760px; margin-inline:auto; }
.article__cover{
  border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--mist);
  box-shadow:var(--shadow-lift); margin-bottom:clamp(28px,3.6vw,46px);
}
.article__cover img{ width:100%; aspect-ratio:16/7; object-fit:cover; }
.prose > * + *{ margin-top:20px; }
.prose h2{ font-size:clamp(1.4rem,2.4vw,1.9rem); margin-top:38px; }
.prose h3{ font-family:var(--sans); font-size:1.08rem; font-weight:600; margin-top:30px; }
.prose p{ color:var(--slate); font-size:1.02rem; }
.prose strong{ color:var(--navy); font-weight:600; }
.prose ul, .prose ol{ padding-left:22px; color:var(--slate); font-size:1.02rem; }
.prose li + li{ margin-top:8px; }
.prose blockquote{
  margin:30px 0; padding:22px 26px; border-left:3px solid var(--ruby);
  background:var(--ice); border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--serif); font-style:italic; font-size:1.14rem; color:var(--navy);
}
.prose a{ color:var(--ruby); border-bottom:1px solid var(--blush); }
.prose a:hover{ border-color:var(--ruby); }
.prose hr{ border:0; border-top:1px solid var(--mist); margin:38px 0; }

/* ============================================================
   Formulaire de contact
   ============================================================ */
.formgrid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,60px); align-items:start; }
.form{
  background:#fff; border:1px solid var(--mist); border-radius:var(--r-lg);
  padding:clamp(26px,3.2vw,42px); box-shadow:var(--shadow-soft);
}
.field{ display:block; margin-bottom:18px; }
.field span{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy); margin-bottom:8px;
}
.field span i{ color:var(--ruby); font-style:normal; }
.field input,
.field select,
.field textarea{
  width:100%; font-family:var(--sans); font-size:.95rem; color:var(--navy);
  background:var(--cream); border:1px solid var(--mist); border-radius:12px;
  padding:13px 16px; transition:border-color .35s var(--ease), background .35s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form__note{ margin-top:16px; font-size:.78rem; color:var(--slate); }
.form .btn{ width:100%; justify-content:center; margin-top:8px; }

.aside{ display:grid; gap:16px; }
.aside__card{
  background:#fff; border:1px solid var(--mist); border-radius:var(--r-md);
  padding:24px 26px; box-shadow:var(--shadow-soft);
}
.aside__card h3{ font-family:var(--sans); font-size:.95rem; font-weight:600; }
.aside__card p{ margin-top:8px; font-size:.88rem; color:var(--slate); }
.aside__card a{ color:var(--ruby); font-weight:600; }

/* ============================================================
   Pages légales
   ============================================================ */
.legal{ max-width:820px; }
.legal h2{ font-size:clamp(1.3rem,2.2vw,1.7rem); margin-top:42px; }
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-family:var(--sans); font-size:1rem; font-weight:600; margin-top:26px; }
.legal p, .legal li{ color:var(--slate); font-size:.98rem; }
.legal > * + *{ margin-top:16px; }
.legal ul{ padding-left:22px; }
.legal li + li{ margin-top:8px; }
.legal dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 26px; font-size:.96rem; }
.legal dt{ font-weight:600; color:var(--navy); }
.legal dd{ margin:0; color:var(--slate); }
.legal__maj{
  display:inline-block; padding:.4em 1em; border-radius:100px;
  background:var(--ice); border:1px solid var(--mist);
  font-size:.76rem; color:var(--slate);
}
.todo{
  background:#FFF6E9; border:1px dashed #E0A33C; border-radius:var(--r-md);
  padding:18px 22px; font-size:.88rem; color:#7A5314;
}
.todo strong{ color:#7A5314; }

/* ============================================================
   Bande CTA de bas de page
   ============================================================ */
.ctaband{
  position:relative; overflow:hidden; background:var(--navy); color:#fff;
  padding:clamp(44px,5.5vw,74px) 0;
}
.ctaband__inner{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  gap:clamp(24px,4vw,60px); flex-wrap:wrap;
}
.ctaband h2{ font-size:clamp(1.6rem,3vw,2.4rem); max-width:20ch; }
.ctaband h2 em{ font-style:italic; color:var(--blush); }
.ctaband p{ margin-top:12px; color:#B9C8DA; max-width:46ch; font-size:.96rem; }
.ctaband__actions{ display:flex; gap:12px; flex-wrap:wrap; }

/* ============================================================
   Adaptations écran
   ============================================================ */
@media (max-width:960px){
  .svc{ grid-template-columns:1fr; gap:26px; }
  .tarifs{ grid-template-columns:1fr; }
  .works{ grid-template-columns:repeat(2,1fr); }
  .posts{ grid-template-columns:repeat(2,1fr); }
  .magnets{ grid-template-columns:repeat(2,1fr); }
  .formgrid{ grid-template-columns:1fr; }
}
@media (max-width:700px){
  .avis{ grid-template-columns:1fr; }
  .works{ grid-template-columns:1fr; }
  .posts{ grid-template-columns:1fr; }
  .magnets{ grid-template-columns:1fr; }
  .field--row{ grid-template-columns:1fr; }
  .legal dl{ grid-template-columns:1fr; gap:4px; }
  .legal dd{ margin-bottom:10px; }
  .ctaband__actions .btn{ width:100%; justify-content:center; }
  .svc__meta dt{ width:76px; }
}