/* Pages collections (Voilages, Occultants, Tamisants, Velours et tissus lourds, Rails et accessoires, Linge de bain), 21/10/2026.
   Feuille unique, construite à partir du CSS des maquettes validées (design system Collection Sepya v1.2) : mêmes noms de classes, chaque
   règle limitée au conteneur .cp (site.css est partagé avec le reste du site et le back-office, et y définit déjà .swatches, .steps,
   .actions, .row, .consent…). Chargée seulement sur ces pages. En-tête et pied de page : ceux du site. Jetons : :root de site.css. */

/* 1. Neutralisation des règles globales de site.css qui touchent les mêmes éléments (avant les règles des maquettes, qui l'emportent) */
.cp section{padding:0}
.cp p{max-width:none}
.cp .actions{margin-top:0}
.cp .steps{counter-reset:none;border-top:0}
.cp .steps li{display:block;gap:0;padding:0;border-bottom:0}
.cp .steps li::before{content:none}
.cp form{display:block;background:none;border:0;border-radius:0;padding:0}
.cp .swatches{margin:0}
.cp label{gap:0}

/* 2. Règles des maquettes */
.cp{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
.cp a{color:var(--ink);text-underline-offset:3px}
.cp a:hover{color:#000}
.cp img{display:block;max-width:100%;height:auto}
.cp h1,.cp h2,.cp h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.1}
.cp .btn{display:inline-block;text-decoration:none;padding:13px 22px;border-radius:2px;font-weight:600;font-size:15px;line-height:1.3;border:1px solid transparent}
.cp .btn-primary{background:var(--navy);color:#fff}
.cp .btn-primary:hover{background:#252a42;color:#fff}
.cp .btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}
.cp .btn-ghost:hover{background:var(--ink);color:var(--bg)}
.cp .btn-light{background:var(--petrol-ink);color:var(--petrol)}
.cp .btn-light:hover{background:#fff;color:var(--petrol)}
.cp .kicker{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}
.cp .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cp figure{margin:0}
.cp .credit{margin-top:8px;font-size:12px;color:var(--muted);letter-spacing:.02em}
.cp .hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;padding:56px 0 72px}
.cp .crumb{margin:0 0 14px;font-size:15px;color:var(--muted)}
.cp .hero h1{font-size:76px;line-height:1;margin-bottom:22px}
.cp .lead{margin:0 0 32px;max-width:540px;font-size:20px;line-height:1.6;color:var(--ink2)}
.cp .reperes{list-style:none;margin:0 0 36px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2)}
.cp .reperes li{padding:16px 16px 0 0}
.cp .reperes li + li{padding-left:16px;border-left:1px solid var(--line2)}
.cp .reperes b{display:block;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1.05}
.cp .reperes span{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:4px}
.cp .hero figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.cp .section{padding:80px 0;border-top:1px solid var(--line)}
.cp .section-head{max-width:760px;margin-bottom:48px}
.cp .section-head h2{font-size:48px;margin-bottom:12px}
.cp .section-head p{margin:0;color:var(--ink2);font-size:18px}
.cp .mat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px 64px;align-items:start;padding:56px 0}
.cp .mat + .mat{border-top:1px solid var(--line)}
.cp .mat.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.cp .mat.rev .mat-media{order:2}
.cp .mat-media .amb img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cp .proof{display:grid;grid-template-columns:168px minmax(0,1fr);gap:20px;align-items:center;margin-top:24px}
.cp .proof img{width:168px;height:168px;object-fit:cover}
.cp .proof p{margin:0;font-size:15px;color:var(--ink2)}
.cp .proof .kicker{margin-bottom:6px}
.cp .badge{display:inline-block;margin:0 0 14px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--petrol);border-bottom:1px solid var(--petrol);padding-bottom:3px}
.cp .mat h3{font-size:44px;margin-bottom:16px}
.cp .mat-text .desc{margin:0 0 24px;color:var(--ink2);font-size:17px}
.cp .carac{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.cp .carac li{padding:12px 12px 12px 0;font-weight:600;font-size:15px;line-height:1.35}
.cp .carac li + li{padding-left:12px;border-left:1px solid var(--line2)}
.cp .swatches{list-style:none;margin:0;padding:0;display:grid;gap:14px 10px}
.cp .sw5{grid-template-columns:repeat(5,minmax(0,1fr))}
.cp .sw6{grid-template-columns:repeat(6,minmax(0,1fr))}
.cp .sw9{grid-template-columns:repeat(9,minmax(0,1fr));gap:18px 14px}
.cp .swatches li{min-width:0}
.cp .swatches img{width:100%;aspect-ratio:1/1;object-fit:cover;outline:1px solid rgba(0,0,0,.12);outline-offset:-1px}
.cp .swatches span{display:block;margin-top:7px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.cp .swatches span i{font-style:normal;color:var(--muted)}
.js .cp .swatches:not(.open) li.more{display:none}
.cp .toggle{display:none;margin-top:18px;background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.js .cp .toggle{display:inline-block}
.cp .note{margin:12px 0 0;font-size:13px;color:var(--muted)}
.cp .mat-text .actions{margin-top:28px}
.cp .mat-wide{grid-column:1/-1;padding-top:8px}
.cp .mat-wide .actions{margin-top:28px}
.cp .compare{width:100%;border-collapse:collapse}
.cp .compare caption{text-align:left}
.cp .compare th,.cp .compare td{text-align:left;padding:18px 20px 18px 0;border-bottom:1px solid var(--line2);vertical-align:top}
.cp .compare thead th{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom-color:var(--ink)}
.cp .compare tbody th{font-family:var(--serif);font-weight:500;font-size:28px;line-height:1.1;width:20%}
.cp .compare td{font-size:16px}
.cp .hint{margin:28px 0 0;font-size:17px;color:var(--ink2)}
.cp .hint a{font-weight:600}
.cp .confection{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px 64px;align-items:center}
.cp .confection h3,.cp .finitions h3,.cp .entretien h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:10px;line-height:1.3}
.cp .confection p,.cp .finitions p,.cp .entretien p{margin:0;color:var(--ink2)}
.cp .confection svg{width:100%;height:auto;display:block}
.cp .finitions{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.cp .finitions .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:28px}
.cp .finitions svg{width:100%;max-width:240px;height:auto;display:block;margin-bottom:16px}
.cp .finitions h4{margin:0 0 6px;font-size:16px;font-weight:600}
.cp .entretien{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);max-width:760px}
.cp .duo{background:var(--petrol);color:var(--petrol-ink);padding:64px 56px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;margin:0 0 80px}
.cp .duo h2{font-size:44px;margin-bottom:16px}
.cp .duo p{margin:0 0 28px;color:var(--petrol-muted);font-size:17px}
.cp .duo .kicker{color:var(--petrol-muted)}
.cp .duo a.link{color:var(--petrol-ink);font-weight:600;padding:13px 4px}
.cp .duo svg{width:100%;height:auto;display:block}
.cp .docfaq{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:56px}
.cp .docfaq h2{font-size:38px;margin-bottom:16px}
.cp .docfaq p{margin:0 0 14px;color:var(--ink2)}
.cp .docfaq .actions{margin-top:24px}
.cp details{border-top:1px solid var(--line2);padding:16px 0}
.cp details:last-of-type{border-bottom:1px solid var(--line2)}
.cp summary{font-weight:600;cursor:pointer}
.cp details p{margin:10px 0 0 !important}
/* Bloc « Une sélection, pas une limite » (22/10/2026) : filet fin, kicker, titre léger, deux phrases, lien texte ; sans fond ni bannière */
.cp .selection-projet{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px 56px;align-items:start;padding:48px 0;border-top:1px solid var(--line)}
.cp .selection-projet .kicker{margin-bottom:10px}
.cp .selection-projet h2{font-size:32px}
.cp .selection-projet-body p{margin:0;max-width:62ch;font-size:17px;line-height:1.65;color:var(--ink2)}
.cp .selection-projet-body .selection-projet-cta{margin-top:14px}
.cp .selection-projet-cta a{font-weight:600}
@media (max-width:700px){.cp .selection-projet{grid-template-columns:minmax(0,1fr);padding:40px 0}.cp .selection-projet h2{font-size:28px}}
.cp .others{padding:40px 0 96px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:baseline}
.cp .others .kicker{margin:0 12px 0 0}
.cp .others a{text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:2px}
@media (max-width:1000px){
  .cp .hero{grid-template-columns:1fr;gap:36px;padding-top:40px}
  .cp .hero figure{order:2}
  .cp .mat{display:flex;flex-direction:column;align-items:stretch}
  .cp .mat-media,.cp .mat-text{display:contents}
  .cp .mat .badge{order:1;align-self:flex-start}
  .cp .mat h3{order:2}
  .cp .mat .amb{order:3}
  .cp .mat .proof{order:4;margin:20px 0 28px}
  .cp .mat .desc{order:5}
  .cp .mat .carac{order:6}
  .cp .mat-text > .kicker{order:7}
  .cp .mat-text > .swatches{order:8}
  .cp .mat-text > .note{order:9}
  .cp .mat-wide{order:9;padding-top:0}
  .cp .mat-text > .actions{order:10}
  .cp .sw9{grid-template-columns:repeat(6,minmax(0,1fr))}
  .js .cp .swatches:not(.open) li.more-m{display:none}
  .cp .confection{grid-template-columns:1fr}
  .cp .duo{grid-template-columns:1fr;padding:44px 32px}
  .cp .duo svg{order:2}
}
@media (max-width:700px){
  .cp .hero h1{font-size:54px}
  .cp .lead{font-size:18px}
  .cp .reperes b{font-size:30px}
  .cp .reperes li{padding-right:10px}
  .cp .reperes li + li{padding-left:10px}
  .cp .section{padding:56px 0}
  .cp .section-head h2{font-size:38px}
  .cp .mat{padding:40px 0}
  .cp .mat h3{font-size:38px}
  .cp .proof{grid-template-columns:112px minmax(0,1fr);gap:16px}
  .cp .proof img{width:112px;height:112px}
  .cp .carac{grid-template-columns:1fr}
  .cp .carac li,.cp .carac li + li{padding:10px 0;border-left:0}
  .cp .carac li + li{border-top:1px solid var(--line2)}
  .cp .sw5,.cp .sw6,.cp .sw9{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
  .cp .compare thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cp .compare,.cp .compare tbody,.cp .compare tr,.cp .compare th,.cp .compare td{display:block;width:100%}
  .cp .compare tr{padding:20px 0;border-top:1px solid var(--ink)}
  .cp .compare tbody th{border:0;padding:0 0 10px;font-size:30px;width:auto}
  .cp .compare td{border:0;padding:6px 0;display:grid;grid-template-columns:110px minmax(0,1fr);gap:12px}
  .cp .compare td::before{content:attr(data-label);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:2px}
  .cp .finitions .grid{grid-template-columns:1fr;gap:32px}
  .cp .duo{padding:36px 20px;margin-bottom:56px}
  .cp .duo h2{font-size:36px}
}
.cp .mat.rev .mat-wide{order:3}
.cp .confection + .confection{margin-top:64px;padding-top:40px;border-top:1px solid var(--line)}
.cp .usages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px;border-top:1px solid var(--line2)}
.cp .usages > div{padding:28px 0;border-bottom:1px solid var(--line2)}
.cp .usages h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:8px;line-height:1.3}
.cp .usages p{margin:0;color:var(--ink2)}
.cp .steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.cp .steps li{border-top:1px solid var(--line2);padding-top:20px}
.cp .steps b{display:block;font-family:var(--serif);font-weight:500;font-size:38px;line-height:1;margin-bottom:12px}
.cp .steps h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:8px;line-height:1.3}
.cp .steps p{margin:0;color:var(--ink2)}
.cp .principe svg{width:100%;max-width:760px;height:auto;display:block;margin:0 auto 48px}
.cp .section > .finitions:first-child{margin-top:0;padding-top:0;border-top:0}
.cp .finitions .also{margin:28px 0 0;color:var(--ink2)}
.cp .usages.u3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}
@media (max-width:1000px){
  .cp .steps{grid-template-columns:1fr;gap:24px}
  .cp .usages.u3{grid-template-columns:1fr}
}
@media (max-width:700px){
  .cp .usages{grid-template-columns:1fr}
}
.cp .form{max-width:900px}
.cp .form fieldset{border:0;border-top:1px solid var(--line2);margin:0;padding:24px 0;min-width:0}
.cp .form legend{font-family:var(--serif);font-size:30px;line-height:1.1;padding:0;margin-bottom:14px}
.cp .form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin-bottom:16px}
.cp .form label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.cp .form small{font-weight:400;color:var(--muted)}
.cp .form input,.cp .form select,.cp .form textarea{font:inherit;font-weight:400;font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--line2);border-radius:2px;padding:10px 12px;min-height:44px;width:100%}
.cp .form input:focus,.cp .form select:focus,.cp .form textarea:focus{outline:2px solid var(--navy);outline-offset:1px}
.cp .form .item{display:grid;grid-template-columns:minmax(0,3fr) repeat(3,minmax(0,2fr));gap:12px 16px;align-items:end;padding:14px 0;border-bottom:1px solid var(--line)}
.cp .form .item-name{font-weight:600;padding-bottom:12px}
.cp .form .item .hint-item{grid-column:1/-1;margin:0;font-size:13px;color:var(--muted)}
.cp .form .radios{border:0;padding:12px 0}
.cp .form .radios legend{font-family:var(--sans);font-size:15px;font-weight:600;margin-bottom:8px}
.cp .form .radios label{display:inline-flex;flex-direction:row;align-items:center;gap:8px;font-weight:400;margin:0 24px 8px 0}
.cp .form .radios input,.cp .form .consent input{min-height:0;width:18px;height:18px;flex:none}
.cp .form .consent{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;margin:20px 0}
.cp .form .note{margin:0 0 8px}
@media (max-width:700px){
  .cp .form .row{grid-template-columns:1fr}
  .cp .form .item{grid-template-columns:1fr 1fr}
  .cp .form .item-name{grid-column:1/-1;padding:0}
}
.cp .solutions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 40px;margin-top:56px}
.cp .solutions svg{width:100%;max-width:260px;height:auto;display:block;margin-bottom:16px}
.cp .solutions h3{font-family:var(--sans);font-size:19px;font-weight:600;margin-bottom:8px;line-height:1.3}
.cp .solutions p{margin:0;color:var(--ink2)}
@media (max-width:1000px){
  .cp .solutions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .cp .solutions{grid-template-columns:1fr;gap:36px}
}
.cp .confection figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.cp .section + .docfaq{border-top:1px solid var(--line);padding-top:80px}
@media (max-width:700px){
  .cp .section + .docfaq{padding-top:56px}
}

/* 3. Compléments d'intégration */
/* Conteneur : celui du site (.wrap de site.css, jetons --max et --pad), pour un seul axe en-tête / contenu sur tout le site (décision du
   21/10/2026) ; les proportions des maquettes (grilles en fractions, ratios d'images) sont gardées. */
.cp .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cp .btn{min-height:44px}
.cp .hero figure img{height:auto}
.cp .proof img{height:auto;aspect-ratio:1/1}
.cp .swatches img{height:auto}
.cp .form-errors{margin-bottom:20px}
/* Arrivée par /matieres/<fiche> (302 vers #m-…) : le titre et le badge de la rangée restent visibles sous l'en-tête collant (html a déjà
   scroll-padding-top = hauteur de l'en-tête) */
.cp .mat h3[id]{scroll-margin-top:64px}
/* Zones tactiles d'au moins 44 px au téléphone et à la tablette (audit) : fil d'Ariane, questions de la FAQ, « Voir les N teintes »,
   liens « Autres collections », boutons radio et case de consentement du formulaire ; rendu identique aux maquettes sur ordinateur */
@media (max-width:1000px){
  .cp .crumb a{display:inline-flex;align-items:center;min-height:44px}
  .cp details{padding:6px 0}
  .cp summary{padding:10px 0}
  .cp .toggle{padding:10px 0;min-height:44px}
  .cp .others a{border-bottom:0;text-decoration:underline;text-decoration-color:var(--line2);text-decoration-thickness:1px;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
  .cp .form .radios label{min-height:44px;margin-bottom:0}
  .cp .form .consent{align-items:center;min-height:44px}
}
/* Intégration finale (21/10/2026, recette accessibilité) : liens des en-têtes de ligne du comparatif à 44 px de haut */
.cp .compare tbody th a{display:inline-flex;align-items:center;min-height:44px}
/* 22/10/2026 (demande de Johan) : l'action principale de chaque matière suit le nom, le texte et les caractéristiques, avant le nuancier
   et la preuve matière. Ordinateur : bouton avant le nuancier dans la colonne texte. Mobile : nom, image, texte, caractéristiques, bouton,
   nuancier, puis « Voir la matière de près ». */
.cp .mat-text .carac + .actions,.cp .mat-text .desc + .actions{margin-top:0}
.cp .mat-text .actions + .kicker{margin-top:36px}
@media (max-width:1000px){
  .cp .mat .desc{order:4}
  .cp .mat .carac{order:5}
  .cp .mat-text > .actions{order:6;margin:0}
  .cp .mat-text > .kicker{order:7;margin-top:32px}
  .cp .mat-text > .swatches{order:8}
  .cp .mat-text > .note{order:9}
  .cp .mat-wide,.cp .mat.rev .mat-wide{order:10;padding-top:32px}
  .cp .mat .proof{order:11;margin:28px 0 0}
}

/* Tablette 744–1180 px (passe du 22/10/2026) : titres intermédiaires et rythme plus compact ; en portrait (744–1000 px), bandeau en
   paysage plafonné et rangées matière côte à côte (image / texte) au lieu de l'empilement mobile, bouton « Configurer avec … » tôt,
   « Voir la matière de près » compact. Mobile (< 744 px) et grand écran (> 1180 px) inchangés. */
@media (min-width:744px) and (max-width:1180px){
  .cp .hero h1{font-size:clamp(56px,5.3vw,62px);margin-bottom:18px}
  .cp .section{padding:64px 0}
  .cp .section-head{margin-bottom:40px}
  .cp .section-head h2{font-size:clamp(38px,3.7vw,44px)}
  .cp .mat{gap:28px 40px;padding:48px 0}
  .cp .mat h3{font-size:38px;margin-bottom:14px}
}
@media (min-width:744px) and (max-width:1000px){
  .cp .hero{gap:32px;padding:32px 0 56px}
  .cp .hero figure img{aspect-ratio:16/9;max-height:44vh}
  .cp .mat,.cp .mat.rev{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .cp .mat-media,.cp .mat-text{display:block}
  .cp .mat-text > .actions{margin:0}
  .cp .mat-text > .kicker{margin-top:32px}
  .cp .mat .proof{margin:20px 0 0;grid-template-columns:120px minmax(0,1fr);gap:16px}
  .cp .mat .proof img{width:120px}
  .cp .mat-wide,.cp .mat.rev .mat-wide{grid-column:1/-1;padding-top:8px}
  .cp .sw5,.cp .sw6{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 12px}
}
@media (min-width:1001px) and (max-width:1180px){
  .cp .hero{gap:48px;padding:48px 0 64px}
  .cp .hero figure img{max-height:62vh}
}