/* urneanimal.fr — les PAGES DE TEXTE de la refonte (04/10/2026) : garantie à vie, blog et ses articles, contact, compte,
   tous les modèles. Faites par outils/pages-texte.py. Le reste (bandeaux, pied, panier) : css/commun.css. */

.page{max-width:1180px;margin:0 auto;padding:22px clamp(16px, 4vw, 48px) clamp(64px, 9vw, 120px)}
.page-tete{max-width:760px;margin:clamp(22px, 3.4vw, 46px) auto 0;text-align:center}
.page-sur{display:flex;align-items:center;justify-content:center;gap:12px;font:600 11px/1 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--bois)}
.page-sur::before,.page-sur::after{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.page-tete h1{margin-top:16px;font:600 clamp(40px, 5vw, 64px)/1 var(--serif);letter-spacing:-.016em;text-wrap:balance}
.page-tete h1 em,.texte h1 em,.texte h2 em{font-style:italic;font-weight:500;color:var(--bois)}
.page-chapo{max-width:34em;margin:16px auto 0;font:italic 400 clamp(18px, 1.6vw, 22px)/1.45 var(--serif);color:#5C4636}
@keyframes monte-page{from{transform:translateY(14px)}}
.page-tete > *{animation:monte-page 1s cubic-bezier(.2,.7,.2,1) both}
.page-tete > :nth-child(2){animation-delay:.06s} .page-tete > :nth-child(3){animation-delay:.12s}

/* Le texte courant (articles, garantie, compte) */
.texte{max-width:720px;margin:0 auto;padding-top:8px}
.texte h1{margin-top:clamp(18px, 3vw, 34px);font:600 clamp(38px, 4.6vw, 56px)/1.02 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.texte h2{margin-top:42px;font:600 clamp(26px, 2.6vw, 31px)/1.1 var(--serif);scroll-margin-top:calc(var(--h-entete) + 18px)}
.texte h3{margin-top:26px;font:600 19px/1.25 var(--serif)}
.texte p,.texte li{margin-top:13px;font-size:16.5px;line-height:1.7;color:#3E2E23}
.texte ul,.texte ol{margin-top:6px;padding-left:22px}
.texte li::marker{color:var(--bois)}
.texte strong{color:var(--espresso)}
.texte a{color:var(--bois-fonce);font-weight:600;text-underline-offset:3px}
.texte .chapo{font:italic 400 21px/1.5 var(--serif);color:#5C4636}
.encart{margin-top:22px;padding:20px 22px;border-radius:16px;background:#FBF7F1;border:1px solid rgba(58,42,32,.11)}
.texte .encart p:first-child{margin-top:0}
.tableau{width:100%;margin-top:16px;border-collapse:collapse;font-size:15px}
.tableau th,.tableau td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(58,42,32,.12)}
.tableau th{font:600 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--bois)}
.tableau td:last-child{font-variant-numeric:tabular-nums}
.retour{display:inline-flex;align-items:center;gap:8px;margin-top:40px;font:600 14.5px/1 var(--sans);color:var(--bois-fonce);text-decoration:none}
.retour svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* Garantie à vie : la promesse, puis trois étapes */
.promesse{position:relative;margin-top:clamp(30px, 4vw, 52px);padding:clamp(30px, 4vw, 54px) clamp(22px, 4vw, 60px);border-radius:28px;
  overflow:hidden;color:#FBF5EA;text-align:center;
  background:var(--grain), radial-gradient(90% 140% at 50% -20%, #92603A 0%, #7A4A26 50%, #5E3719 100%)}
.promesse h2{font:600 clamp(30px, 3.6vw, 46px)/1.05 var(--serif);text-wrap:balance}
.promesse h2 em{font-style:italic;font-weight:500;color:#EED2A6}
.promesse p{max-width:36em;margin:14px auto 0;font-size:16.5px;line-height:1.6;color:#F2E5D3}
.promesse-sceau{width:64px;height:64px;margin:0 auto 18px;animation:respire 3.6s ease-in-out infinite}
.promesse-sceau .rond{fill:#F6EDDF} .promesse-sceau .patte,.promesse-sceau .coeur{fill:#7A4A26}
@keyframes respire{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.etapes{display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(14px, 2vw, 26px);margin-top:clamp(26px, 3vw, 40px);list-style:none;counter-reset:e}
.etape{position:relative;padding:26px 24px 24px;border-radius:20px;background:#FFFCF7;border:1px solid rgba(58,42,32,.1);
  box-shadow:0 20px 40px -32px rgba(46,33,25,.5);counter-increment:e}
.etape::before{content:counter(e);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--bois);
  color:#FBF5EA;font:600 20px/1 var(--serif)}
.etape h3{margin-top:14px;font:600 22px/1.15 var(--serif)}
.etape p{margin-top:8px;font-size:15px;line-height:1.6;color:#4A382C}
@media (max-width:799px){ .etapes{grid-template-columns:1fr} }

/* Blog : les cartes des articles, puis l'appel aux hommages */
.articles{display:grid;grid-template-columns:repeat(2, 1fr);gap:clamp(18px, 2.4vw, 34px);margin-top:clamp(28px, 4vw, 52px);list-style:none}
.article-carte{position:relative;display:grid;grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);border-radius:22px;overflow:hidden;
  background:#FFFCF7;border:1px solid rgba(58,42,32,.1);box-shadow:0 24px 44px -36px rgba(46,33,25,.6);
  transition:transform .35s cubic-bezier(.2,.75,.2,1), box-shadow .35s}
.article-photo{background:var(--scene);aspect-ratio:1}
.article-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.article-corps{display:flex;flex-direction:column;padding:22px 22px 20px}
.article-sujet{font:600 10.5px/1.3 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bois)}
.article-carte h2{margin-top:10px;font:600 clamp(21px, 1.8vw, 25px)/1.12 var(--serif);text-wrap:balance}
.article-carte h2 a{text-decoration:none}
.article-carte h2 a::after{content:"";position:absolute;inset:0}
.article-carte p{margin-top:10px;font-size:14.5px;line-height:1.55;color:#5C4636}
.article-lire{margin-top:auto;padding-top:14px;font:600 13.5px/1 var(--sans);color:var(--bois-fonce)}
@media (hover:hover){ .article-carte:hover{transform:translateY(-4px);box-shadow:0 34px 56px -36px rgba(46,33,25,.7)} }
@media (max-width:899px){ .articles{grid-template-columns:1fr} }
@media (max-width:499px){ .article-carte{grid-template-columns:1fr} .article-photo{aspect-ratio:16 / 10} }
.appel{margin-top:clamp(40px, 6vw, 80px);padding:clamp(28px, 4vw, 48px);border-radius:26px;background:var(--papier);text-align:center}
.appel h2{font:600 clamp(28px, 3vw, 40px)/1.08 var(--serif);text-wrap:balance}
.appel h2 em{font-style:italic;font-weight:500;color:var(--bois)}
.appel p{max-width:36em;margin:12px auto 0;font-size:16px;line-height:1.6;color:#4A382C}
.bouton{display:inline-flex;align-items:center;gap:.6em;margin-top:22px;padding:.95em 1.5em;border-radius:999px;background:var(--bois);
  color:#FFF7EC;text-decoration:none;font:600 15px/1 var(--sans);box-shadow:0 16px 30px -16px rgba(94,55,25,.85);
  transition:background-color .25s, transform .25s}
.bouton svg{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){ .bouton:hover{background:var(--bois-fonce);transform:translateY(-2px)} }

/* Contact et compte : des cartes */
.cartes-info{display:grid;grid-template-columns:repeat(3, 1fr);gap:clamp(14px, 2vw, 24px);margin-top:clamp(28px, 4vw, 48px)}
.info{padding:26px 24px;border-radius:20px;background:#FFFCF7;border:1px solid rgba(58,42,32,.1);box-shadow:0 20px 40px -32px rgba(46,33,25,.5)}
.info-icone{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#F1E6D6;color:var(--bois)}
.info-icone svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.info h2{margin-top:14px;font:600 22px/1.15 var(--serif)}
.info p{margin-top:8px;font-size:15px;line-height:1.6;color:#4A382C}
.info a{color:var(--bois-fonce);font-weight:600;text-underline-offset:3px;overflow-wrap:anywhere}
@media (max-width:899px){ .cartes-info{grid-template-columns:1fr} }
.questions{max-width:760px;margin:clamp(40px, 6vw, 72px) auto 0}
.questions h2{font:600 clamp(28px, 3vw, 38px)/1.1 var(--serif);text-align:center}
.questions details{margin-top:12px;border-radius:16px;background:#FFFCF7;border:1px solid rgba(58,42,32,.1)}
.questions summary{position:relative;padding:18px 52px 18px 22px;font:600 16px/1.35 var(--sans);cursor:pointer;list-style:none}
.questions summary::-webkit-details-marker{display:none}
.questions summary::after{content:"";position:absolute;right:24px;top:50%;width:9px;height:9px;border-right:1.6px solid var(--bois);
  border-bottom:1.6px solid var(--bois);transform:translateY(-70%) rotate(45deg);transition:transform .3s}
.questions details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.questions details p{padding:0 22px 18px;font-size:15px;line-height:1.65;color:#4A382C}
.questions details a{color:var(--bois-fonce);font-weight:600}

/* Tous les modèles : une rangée par famille */
.famille{margin-top:clamp(34px, 5vw, 60px)}
.famille-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(58,42,32,.14);padding-bottom:10px}
.famille-tete h2{font:600 clamp(26px, 2.6vw, 34px)/1.1 var(--serif)}
.famille-tete h2 em{font-style:italic;font-weight:500;color:var(--bois)}
.famille-tete a{font:600 13.5px/1 var(--sans);color:var(--bois-fonce);white-space:nowrap}
.modeles{display:grid;grid-template-columns:repeat(6, 1fr);gap:16px;margin-top:18px;list-style:none}
.modele{position:relative}
.modele-photo{display:block;aspect-ratio:1;border-radius:16px;overflow:hidden;background:var(--scene);box-shadow:0 16px 30px -24px rgba(46,33,25,.55);
  transition:transform .3s cubic-bezier(.2,.75,.2,1)}
.modele-photo img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.modele h3{margin-top:10px;font:600 18px/1.15 var(--serif)}
.modele h3 a{text-decoration:none}
.modele h3 a::after{content:"";position:absolute;inset:0}
.modele p{margin-top:3px;font-size:12.5px;color:var(--gris-texte)}
.modele p b{color:var(--espresso);font-weight:600}
@media (hover:hover){ .modele:hover .modele-photo{transform:translateY(-3px)} }
@media (max-width:1099px){ .modeles{grid-template-columns:repeat(4, 1fr)} }
@media (max-width:699px){ .modeles{grid-template-columns:repeat(3, 1fr);gap:10px} .modele h3{font-size:15px} .modele p{font-size:11.5px} }

@media (prefers-reduced-motion:reduce){ .page-tete > *,.promesse-sceau{animation:none} .article-carte,.modele-photo,.bouton{transition:none} }