/* INFI NAD · direction « Cocon » : le soin vient à la maison, la douceur d'un intérieur en fin de journée. */
:root{
  --fond:#F5EFE7; --surface:#FFFCF7; --encre:#2A2320; --attenue:#665B54;
  --primaire:#8A4E33; --primaire-fonce:#6F3D27; --primaire-clair:#EBDCCD;
  --accent:#3D5C4C; --accent-texte:#FFFFFF; --filet:#E3D6C8; --sombre:#33261F; --creme:#FFFCF7;
  --titre:'Fraunces',Georgia,'Times New Roman',serif;
  --texte:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --rayon:26px; --gouttiere:clamp(20px,5vw,72px); --section:clamp(80px,11vw,150px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.65 var(--texte);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
::selection{background:var(--primaire-clair)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.lien-evitement{position:absolute;left:-999px;top:12px;background:var(--surface);color:var(--encre);padding:10px 16px;border-radius:999px;z-index:100}
.lien-evitement:focus{left:12px}
.conteneur{width:min(1180px,100% - 2*var(--gouttiere));margin-inline:auto}
.etroit{width:min(720px,100% - 2*var(--gouttiere));margin-inline:auto}
section{padding-block:var(--section)}
h1,h2,h3{font-family:var(--titre);font-weight:300;letter-spacing:-.03em;line-height:1.05;margin:0;text-wrap:balance;font-optical-sizing:auto}
h1 em,h2 em{font-style:italic;font-weight:300}
h2{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h3{font-size:1.6rem;letter-spacing:-.02em;font-weight:400}
p{margin:0 0 1em;text-wrap:pretty}
.surtitre{font:600 .8125rem/1 var(--texte);letter-spacing:.14em;text-transform:uppercase;color:var(--primaire);margin:0 0 20px}
.chapo{font-size:1.18rem;color:var(--attenue);max-width:52ch}
.tel{white-space:nowrap}

/* Boutons */
.btn{display:inline-flex;align-items:center;gap:.6rem;min-height:54px;padding:0 1.6rem;border-radius:999px;font:600 1rem var(--texte);text-decoration:none;border:1.5px solid transparent;transition:transform .25s var(--ease),background .25s,color .25s}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:var(--accent);color:var(--accent-texte)}
.btn-creme{background:var(--creme);color:var(--primaire-fonce)}
.btn-contour{border-color:currentColor;color:inherit}
.btn-contour:hover{background:var(--creme);color:var(--primaire-fonce);border-color:var(--creme)}

/* Haut de page */
.haut{background:var(--primaire);color:var(--creme);position:relative;overflow:hidden}
.haut::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding-block:28px;position:relative;z-index:2}
.nav-liens{display:flex;gap:28px;font-size:.95rem}
.nav-liens a{text-decoration:none;opacity:.86;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:3px;transition:background-size .3s var(--ease),opacity .2s}
.nav-liens a:hover{opacity:1;background-size:100% 1px}
.nav-droite{display:flex;justify-content:flex-end;align-items:center;gap:24px}
.logo img{height:46px;width:auto}
.nav .btn{min-height:44px;padding:0 1.15rem;font-size:.92rem}
.hero{text-align:center;padding-block:clamp(36px,6vw,72px) 0;position:relative;z-index:2}
.hero .surtitre{color:var(--creme);opacity:.85}
.hero h1{font-size:clamp(2.7rem,7.2vw,5.6rem);max-width:15ch;margin-inline:auto}
.hero .chapo{color:var(--creme);opacity:.88;margin:26px auto 0;max-width:46ch}
.hero .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.arche{width:min(620px,100%);margin:clamp(48px,7vw,80px) auto 0;aspect-ratio:5/4;border-radius:999px 999px 0 0;overflow:hidden;position:relative}
.arche img{width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(.92)}
.legende{position:absolute;right:14px;bottom:12px;font-size:.72rem;color:var(--creme);background:rgba(42,35,32,.45);padding:4px 10px;border-radius:999px}
@media (prefers-reduced-motion:no-preference){
  .arche{animation:arche 1.3s var(--ease) .15s both}
  @keyframes arche{from{clip-path:inset(100% 0 0 0 round 999px 999px 0 0)}to{clip-path:inset(0 0 0 0 round 999px 999px 0 0)}}
}

/* Bande de faits */
.faits{padding-block:clamp(40px,5vw,64px);border-bottom:1px solid var(--filet)}
.faits ul{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.faits li{display:grid;gap:4px}
.faits b{font:400 1.5rem/1.15 var(--titre);letter-spacing:-.02em}
.faits span{color:var(--attenue);font-size:.95rem}

/* Soins */
.soins{background:var(--primaire-clair)}
.tete-section{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:end;margin-bottom:56px}
.tete-section .chapo{margin:0}
.grille-soins{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.carte-grande{grid-column:2;grid-row:1/span 2}
.carte{background:var(--surface);border-radius:var(--rayon);padding:clamp(26px,3vw,36px);display:flex;flex-direction:column}
.carte .sous{color:var(--attenue);margin:8px 0 22px}
.carte-grande{background:var(--creme)}.carte-grande ul{columns:1}
.carte ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.carte li{padding:12px 0;border-bottom:1px solid var(--filet)}
.carte li:last-child{border-bottom:0;padding-bottom:0}
.palliatif{margin-top:18px;background:var(--sombre);color:var(--creme);border-radius:var(--rayon);padding:clamp(30px,4vw,48px);display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:center}
.palliatif h3{font-size:clamp(1.8rem,3vw,2.4rem)}
.palliatif p{margin:0;opacity:.88;font-size:1.1rem}
.palliatif .surtitre{color:var(--primaire-clair);margin-bottom:12px}
.note{margin:32px 0 0;color:var(--attenue);text-align:center}

/* L'infirmière */
.infirmiere .conteneur{display:grid;grid-template-columns:5fr 6fr;gap:clamp(40px,7vw,96px);align-items:center}
.portrait{aspect-ratio:4/5;border-radius:999px 999px var(--rayon) var(--rayon);overflow:hidden;position:relative;background:var(--primaire-clair)}
.portrait img{width:100%;height:100%;object-fit:cover;filter:sepia(.14) saturate(.92)}
.infirmiere h2{margin-bottom:26px}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;padding-top:28px;border-top:1px solid var(--filet)}
.chiffres b{display:block;font:300 clamp(2.6rem,5vw,3.6rem)/1 var(--titre);letter-spacing:-.04em;color:var(--primaire)}
.chiffres span{display:block;color:var(--attenue);font-size:.95rem;margin-top:8px}

/* Citation */
.citation{background:var(--sombre);color:var(--creme);text-align:center}
.citation blockquote{margin:0 auto;max-width:22ch;font:300 clamp(2rem,4.6vw,3.5rem)/1.12 var(--titre);letter-spacing:-.03em;text-wrap:balance}
.citation blockquote em{color:var(--primaire-clair)}
.citation figcaption{margin-top:28px;opacity:.75;font-size:.95rem}

/* Étapes */
.etapes ol{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,48px);position:relative}
.etapes ol::before{content:"";position:absolute;top:28px;left:28px;right:calc(33% - 28px);border-top:1.5px dashed var(--primaire);opacity:.5}
.etapes li{position:relative}
.etapes .pastille{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--primaire);color:var(--creme);font:400 1.3rem var(--titre);margin-bottom:24px}
.etapes h3{margin-bottom:10px}
.etapes p{color:var(--attenue);margin:0}

/* Zone */
.zone{background:var(--surface);border-block:1px solid var(--filet)}
.zone .conteneur{display:grid;grid-template-columns:6fr 5fr;gap:48px;align-items:center}
.communes{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.communes li{display:flex;justify-content:space-between;align-items:baseline;padding:20px 24px;border-radius:18px;background:var(--fond)}
.communes b{font:400 1.5rem var(--titre);letter-spacing:-.02em}
.communes span{color:var(--attenue)}

/* Prise en charge */
.charge .deux{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:48px}
.charge .bloc{border:1px solid var(--filet);border-radius:var(--rayon);padding:clamp(26px,3vw,36px)}
.charge h3{margin-bottom:12px}
.charge p{color:var(--attenue);margin:0}

/* FAQ */
.faq{padding-top:0}
.faq details{border-bottom:1px solid var(--filet)}
.faq details:first-of-type{border-top:1px solid var(--encre)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:24px 0;font:400 1.35rem/1.3 var(--titre);letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;background:linear-gradient(var(--primaire),var(--primaire)) center/14px 1.5px no-repeat,linear-gradient(var(--primaire),var(--primaire)) center/1.5px 14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--attenue);margin:0 0 24px;max-width:60ch}
.faq h2{margin-bottom:40px}

/* Contact */
.contact{background:var(--primaire);color:var(--creme);text-align:center}
.contact h2{font-size:clamp(2.4rem,6vw,4.6rem)}
.contact .chapo{color:var(--creme);opacity:.88;margin:20px auto 0}
.grand-tel{display:inline-block;margin-top:34px;font:300 clamp(2.4rem,7vw,4.8rem)/1 var(--texte);letter-spacing:-.03em;text-decoration:none;font-variant-numeric:lining-nums tabular-nums}
.grand-tel:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:10px}
.contact .actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}
.coordonnees{list-style:none;margin:44px 0 0;padding:28px 0 0;border-top:1px solid rgba(255,252,247,.25);display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;font-size:.98rem}
.coordonnees a{text-decoration-thickness:1px;text-underline-offset:4px}
.urgence{margin:28px 0 0;font-size:.95rem;opacity:.85}

/* Pied de page */
.pied{background:var(--sombre);color:var(--creme);padding-block:56px 40px;font-size:.95rem}
.pied .conteneur{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:end}
.pied img{height:40px;width:auto}
.pied p{margin:0;opacity:.78}
.pied a{text-underline-offset:4px}

/* Barre d'appel mobile */
.barre-mobile{display:none}
@media (max-width:860px){
  .barre-mobile{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:8px 8px 8px 20px;border-radius:999px;background:var(--surface);color:var(--encre);box-shadow:0 18px 40px -18px rgba(42,35,32,.45);border:1px solid var(--filet);font-size:.9rem}
  .barre-mobile .btn{min-height:46px;padding:0 1.1rem}
  body{padding-bottom:86px}
  .nav{grid-template-columns:auto 1fr;padding-block:20px}
  .nav-liens,.nav-droite .lien-nav{display:none}
  .nav .logo{order:-1}.nav-droite{justify-content:flex-end}
  .logo img{height:38px}
  .faits ul{grid-template-columns:1fr 1fr}
  .tete-section,.infirmiere .conteneur,.zone .conteneur,.palliatif{grid-template-columns:1fr}
  .grille-soins,.etapes ol,.charge .deux{grid-template-columns:1fr}
  .carte-grande{grid-column:auto;grid-row:auto}
  .etapes ol::before{display:none}
  .pied .conteneur{grid-template-columns:1fr;align-items:start}
}
@media (max-width:480px){.faits ul{grid-template-columns:1fr}.hero .actions .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* Pages secondaires */
.page-simple .haut{padding-bottom:56px}
.page-simple main{padding-block:64px 96px}
.page-simple main h1{font-size:clamp(2.4rem,5vw,3.6rem);margin-bottom:28px}
.page-simple main h2{font-size:1.9rem;margin:48px 0 16px}
.page-simple main p{max-width:65ch}