/* ============================================================
   PC&Co — Pages "Réparation" (pilier + 3 filles)
   Feuille de style à charger via le thème child PrestaShop.
   Charte : violet #200240 / vert #a0cb43 (reprise pcandco.odoo.com).
   Toutes les classes sont préfixées .pcc- pour éviter les collisions.

   IMAGES : toutes hébergées dans /img/cms/ (upload FTP).
   Les fonds (hero + vignettes prestations) sont posés via des classes
   modificatrices ci-dessous — AUCUN style inline dans le corps CMS.
   ============================================================ */

:root{
  --pcc-plum:#200240;
  --pcc-plum-soft:#2c0a52;
  --pcc-green:#a0cb43;
  --pcc-green-dark:#628023;
  --pcc-green-mid:#86ad33;
  --pcc-btn-text:#20290d;
  --pcc-ink:#3f3f3f;
  --pcc-muted:#6a6f74;
  --pcc-line:#e5e7df;
  --pcc-bg:#ffffff;
  --pcc-bg-alt:#f5f7ef;
  --pcc-radius:14px;
  --pcc-shadow:0 10px 30px rgba(32,2,64,.10);
  --pcc-shadow-sm:0 4px 14px rgba(32,2,64,.08);
  --pcc-max:1120px;
  --pcc-font:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --pcc-navy:var(--pcc-plum);
  --pcc-blue:var(--pcc-green-dark);
  --pcc-blue-dark:var(--pcc-green-dark);
  --pcc-accent:var(--pcc-green);
  --pcc-accent-dark:var(--pcc-green-mid);
}

/* ---- conteneur racine du contenu CMS ---- */
.pcc{font-family:var(--pcc-font);color:var(--pcc-ink);line-height:1.65}
.pcc *{box-sizing:border-box}
.pcc img{max-width:100%;height:auto;display:block}
.pcc a{color:var(--pcc-blue-dark)}

.pcc-wrap{max-width:var(--pcc-max);margin:0 auto;padding:0 20px}
.pcc-section{padding:46px 0}
.pcc-section--alt{background:var(--pcc-bg-alt)}

/* === Full-bleed : hero + fonds de section sur toute la largeur de l'écran ===
   Utile quand le thème enferme le contenu CMS dans un conteneur étroit
   (ex. .container 1200px). Le contenu reste centré grâce à .pcc-wrap.
   Ne s'applique qu'aux pages où ce CSS est chargé (pages CMS). */
.pcc-hero,
.pcc-return-bar,
.pcc-section{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}
.pcc h2{font-size:1.6rem;line-height:1.25;margin:0 0 .35em;color:var(--pcc-navy)}
.pcc h3{font-size:1.16rem;margin:0 0 .4em;color:var(--pcc-navy)}
.pcc p{margin:0 0 1em}
.pcc-lead{font-size:1.08rem;color:var(--pcc-muted)}
.pcc-kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pcc-blue);margin-bottom:.6rem}
.pcc-kicker--light{color:#c6e08e}
.pcc-section-head{max-width:62ch;margin:0 auto 26px;text-align:center}
.pcc .pcc-note{margin:36px auto 0 !important;max-width:62ch;text-align:center !important;color:var(--pcc-muted)}

/* ---- breadcrumb ---- */
.pcc-breadcrumb{font-size:.82rem;color:#9fb1c2;padding:14px 0 0}
.pcc-breadcrumb a{color:#cdd9e6;text-decoration:none}
.pcc-breadcrumb a:hover{text-decoration:underline}

/* ---- hero ---- */
.pcc-hero{position:relative;color:#fff;overflow:hidden;
  background-color:var(--pcc-navy);background-size:cover;background-position:center;background-repeat:no-repeat}
.pcc-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,rgba(32,2,64,.92) 0%,rgba(32,2,64,.78) 45%,rgba(32,2,64,.45) 100%)}
.pcc-hero__inner{position:relative;max-width:var(--pcc-max);margin:0 auto;padding:18px 20px 56px}
.pcc-hero h1{font-size:2.05rem;line-height:1.18;margin:.5em 0 .35em;max-width:20ch;color:#fff}
.pcc-hero p{font-size:1.08rem;color:#dbe6f1;max-width:62ch;margin-bottom:1.5em}
.pcc-cta-row{display:flex;flex-wrap:wrap;gap:12px}
/* fonds hero par page */
.pcc-hero--reparation{background-image:url(/img/cms/reparation-informatique-quevert-dinan.jpg)}
.pcc-hero--ordinateur{background-image:url(/img/cms/reparation-ordinateur-quevert-dinan.jpg)}
.pcc-hero--smartphone{background-image:url(/img/cms/reparation-smartphone-tablette-quevert-dinan.jpg)}
.pcc-hero--console{background-image:url(/img/cms/reparation-console-quevert-dinan.jpg)}

.pcc-btn{display:inline-flex;align-items:center;gap:.5em;font-weight:700;font-size:1rem;
  padding:.78em 1.35em;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:.15s}
.pcc-btn--primary{background:var(--pcc-green);color:var(--pcc-btn-text)}
.pcc-btn--primary:hover{background:var(--pcc-green-mid)}
.pcc-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.pcc-btn--ghost:hover{background:rgba(255,255,255,.12)}

/* ---- barre de retour vers le pilier ---- */
.pcc-return-bar{background:var(--pcc-bg-alt);border-bottom:1px solid var(--pcc-line)}
.pcc-return{display:inline-flex;align-items:center;gap:.5em;font-weight:700;text-decoration:none;
  color:var(--pcc-green-dark);padding:13px 0}
.pcc-return:hover{color:var(--pcc-plum)}

/* ---- stats ---- */
.pcc-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pcc-stats li{background:#fff;border:1px solid var(--pcc-line);border-radius:var(--pcc-radius);
  padding:18px 14px;text-align:center;box-shadow:var(--pcc-shadow-sm)}
.pcc-stats b{display:block;font-size:1.7rem;color:var(--pcc-blue);line-height:1.1}
.pcc-stats span{display:block;font-size:.84rem;color:var(--pcc-muted);margin-top:.25em}

/* ---- service cards (pilier -> filles) ---- */
.pcc-cards{display:grid;grid-template-columns:1fr;gap:20px;margin-top:8px}
.pcc-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--pcc-line);
  border-radius:var(--pcc-radius);overflow:hidden;box-shadow:var(--pcc-shadow-sm);
  color:inherit;transition:.18s}
.pcc-card:hover{transform:translateY(-4px);box-shadow:var(--pcc-shadow);border-color:#cfe0f3}
.pcc-card__img{aspect-ratio:3/2;object-fit:cover;width:100%}
.pcc-card__body{padding:18px 20px 20px}
.pcc-card__body p{font-size:.96rem;color:var(--pcc-muted)}
.pcc-card__more{display:inline-flex;align-items:center;gap:.4em;font-weight:700;color:var(--pcc-blue-dark);text-decoration:none}
/* lien étiré : rend toute la carte cliquable sans envelopper de blocs dans le <a> */
.pcc-card__more::after{content:"";position:absolute;inset:0;z-index:1}
.pcc-card:hover .pcc-card__more{color:var(--pcc-accent-dark)}

/* ---- grille générique + encadrés (pannes, pièces) ---- */
.pcc-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
.pcc-itembox{background:#fff;border:1px solid var(--pcc-line);border-left:4px solid var(--pcc-green);
  border-radius:var(--pcc-radius);padding:18px 20px;box-shadow:var(--pcc-shadow-sm)}
.pcc-itembox h3{margin:0 0 .35em;font-size:1.08rem}
.pcc-itembox p{margin:0;font-size:.95rem;color:var(--pcc-muted)}
.pcc-badge{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--pcc-green-dark);background:#eef4dd;border-radius:999px;padding:.25em .7em;margin-bottom:.6em}

/* ---- texte + média (2 colonnes) ---- */
.pcc-split{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.pcc-split__media img{border-radius:var(--pcc-radius);box-shadow:var(--pcc-shadow);width:100%;object-fit:cover}

/* ---- prestations en vignettes (fonds /img/cms/) ---- */
.pcc-presta__intro{max-width:62ch;color:var(--pcc-muted);margin:0 0 6px}
.pcc-presta__group{margin-top:26px}
.pcc-presta__group h3{font-size:.85rem;color:var(--pcc-green-dark);text-transform:uppercase;letter-spacing:.07em;margin:0 0 14px}
.pcc-presta{display:grid;grid-template-columns:1fr;gap:14px}
.pcc-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:158px;
  padding:16px;border-radius:var(--pcc-radius);overflow:hidden;color:#fff;
  background-color:var(--pcc-plum);background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:var(--pcc-shadow-sm)}
.pcc-tile::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(32,2,64,.90) 0%,rgba(32,2,64,.45) 55%,rgba(32,2,64,.12) 100%)}
.pcc-tile > *{position:relative;z-index:2}
.pcc-tile__title{font-weight:700;font-size:1.02rem;display:flex;gap:.4em;align-items:center;margin-bottom:.2em}
.pcc-tile p{margin:0;font-size:.86rem;color:#ece6f5;line-height:1.45}
/* fonds des vignettes prestations */
.pcc-tile--vente{background-image:url(/img/cms/vente.webp)}
.pcc-tile--assemblage{background-image:url(/img/cms/assemblage.webp)}
.pcc-tile--reparation{background-image:url(/img/cms/reparation.webp)}
.pcc-tile--securite{background-image:url(/img/cms/Securite.webp)}
.pcc-tile--depannage{background-image:url(/img/cms/depannage.webp)}
.pcc-tile--maintenance{background-image:url(/img/cms/maintenance.webp)}
.pcc-tile--materiel{background-image:url(/img/cms/materiel.webp)}
.pcc-tile--installation{background-image:url(/img/cms/Installation.webp)}
.pcc-tile--securite-pro{background-image:url(/img/cms/securite_pro.webp)}
.pcc-tile--sauvegarde{background-image:url(/img/cms/sauvegarde.webp)}

/* ---- steps ---- */
.pcc-steps{counter-reset:step;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.pcc-steps li{position:relative;background:#fff;border:1px solid var(--pcc-line);border-radius:var(--pcc-radius);
  padding:20px 20px 20px 64px;box-shadow:var(--pcc-shadow-sm)}
.pcc-steps li::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:18px;
  width:34px;height:34px;border-radius:50%;background:var(--pcc-blue);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.pcc-steps b{color:var(--pcc-navy)}

/* ---- callout ---- */
.pcc-callout{display:flex;gap:14px;justify-content:center;text-align:center;
  background:#f3f8e6;border:1px solid #d8e7b0;border-left:5px solid var(--pcc-green);
  border-radius:var(--pcc-radius);padding:18px 20px;margin:26px auto 0;max-width:820px}
.pcc-callout__icon{font-size:1.4rem;line-height:1.3}
.pcc-callout p{margin:0;font-size:.97rem}
.pcc-callout strong{color:var(--pcc-navy)}

/* ---- why (features) ---- */
.pcc-why{display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
.pcc-why__media img{border-radius:var(--pcc-radius);box-shadow:var(--pcc-shadow);width:100%;object-fit:cover}
.pcc-features{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.pcc-features li{padding-left:30px;position:relative}
.pcc-features li::before{content:"";position:absolute;left:0;top:.45em;width:14px;height:14px;border-radius:50%;
  background:var(--pcc-blue);box-shadow:0 0 0 4px rgba(160,203,67,.22)}
.pcc-features b{color:var(--pcc-navy)}

/* ---- zone ---- */
.pcc-zone__list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pcc-zone__list li{background:#fff;border:1px solid var(--pcc-line);border-radius:999px;
  padding:.45em 1em;font-size:.92rem;color:var(--pcc-navy);font-weight:600}

/* ---- contact ---- */
.pcc-contact{background:var(--pcc-navy);color:#dce7f2;border-radius:18px;padding:30px 26px}
.pcc-contact h2{color:#fff}
.pcc-contact p{color:#cdd9e6}
.pcc-contact__grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.pcc-contact__item{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);border-radius:var(--pcc-radius);padding:14px 16px}
.pcc-contact__item .ic{font-size:1.25rem}
.pcc-contact address{font-style:normal;color:#fff;line-height:1.5}
.pcc-contact a{color:#fff;font-weight:700;text-decoration:none}
.pcc-contact a:hover{text-decoration:underline}
.pcc-tel{font-size:1.25rem}

/* ---- faq ---- */
.pcc-faq{display:grid;gap:12px;margin-top:8px}
.pcc-faq details{background:#fff;border:1px solid var(--pcc-line);border-radius:var(--pcc-radius);padding:0 18px;box-shadow:var(--pcc-shadow-sm)}
.pcc-faq summary{cursor:pointer;list-style:none;font-weight:700;color:var(--pcc-navy);padding:16px 0;display:flex;justify-content:space-between;align-items:center;gap:1em}
.pcc-faq summary::-webkit-details-marker{display:none}
.pcc-faq summary::after{content:"+";font-size:1.4rem;color:var(--pcc-blue);transition:.2s;line-height:1}
.pcc-faq details[open] summary::after{transform:rotate(45deg)}
.pcc-faq details p{margin:0 0 16px;color:var(--pcc-muted)}

/* ---- maillage croisé (bas de page fille) ---- */
.pcc-cross{display:grid;grid-template-columns:1fr;gap:14px;margin-top:8px}
.pcc-cross a{display:flex;align-items:center;justify-content:space-between;gap:1em;background:#fff;
  border:1px solid var(--pcc-line);border-radius:var(--pcc-radius);padding:16px 20px;text-decoration:none;
  color:var(--pcc-plum);font-weight:700;box-shadow:var(--pcc-shadow-sm);transition:.15s}
.pcc-cross a:hover{border-color:var(--pcc-green);transform:translateY(-2px)}
.pcc-cross a .arr{color:var(--pcc-green-dark)}

/* ===================== DESKTOP ===================== */
@media(min-width:680px){
  .pcc-stats{grid-template-columns:repeat(4,1fr)}
  .pcc-cards{grid-template-columns:repeat(3,1fr)}
  .pcc-presta{grid-template-columns:repeat(2,1fr)}
  .pcc-grid{grid-template-columns:repeat(2,1fr)}
  .pcc-cross{grid-template-columns:repeat(3,1fr)}
  .pcc-contact__grid{grid-template-columns:1fr 1fr}
}
@media(min-width:860px){
  .pcc h2{font-size:1.95rem}
  .pcc-section{padding:64px 0}
  .pcc-hero h1{font-size:2.7rem}
  .pcc-hero__inner{padding-bottom:74px}
  .pcc-steps{grid-template-columns:repeat(2,1fr)}
  .pcc-presta{grid-template-columns:repeat(3,1fr)}
  .pcc-grid{grid-template-columns:repeat(3,1fr)}
  .pcc-why{grid-template-columns:1.1fr 1fr;gap:40px}
  .pcc-why--reverse .pcc-why__media{order:2}
  .pcc-split{grid-template-columns:1fr 1fr;gap:40px}
  .pcc-split--reverse .pcc-split__media{order:2}
}